6、webpack管理资源--加载数据

※项目使用前文webpack起步建立的项目

※JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

1）安装csv-loader 和 xml-loader

npm install csv-loader xml-loader --save-dev

2）修改webpack.config.js，追加css模块加载规则

const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { // 添加模块加载规则 rules: [{ test: /\.(csv|tsv)$/, // 要加载的文件后缀，无引号 use: [ // 使用的加载器 'csv-loader' ] },{ test: /\.xml$/, // 要加载的文件后缀，无引号 use: [ // 使用的加载器 'xml-loader' ] }] } }

 

3）添加src/data.xml文件

<?xml version="1.0" encoding="UTF-8"?> <person> <name>张三</name> <age>70</age> </person>

 

4）修改src/index.js文件，使用logo.jpg文件

import _ from 'lodash'; import './style.css'; // 导入css文件 import logo from './logo.jpg'; // 导入图片文件 import data from './data.xml'; // 导入数据文件 function component() { var element = document.createElement('div'); //element.innerHTML = _.join(['Hello', 'webpack的我'], '--'); // 使用导入的数据 var name = _.join(['name', data.person.name[0]], '--'); var age = _.join(['name', data.person.age[0]], '--'); element.innerHTML = _.join([name, age], '<br/>'); // 组件元素追加class样式 element.classList.add('hello'); // 加载图片 var image = new Image(400, 400); image.src = logo; element.appendChild(image); return element; } document.body.appendChild(component());

5）修改src/style.css文件，hello不使用远程字体

.hello { color: red; }

6）编译查看结果

 

npm run build