加载数据
除了css、images、fonts字体等资源，也可以加载的资源还有数据，如 JSON 文件，CSV、TSV 和 XML。
类似于 NodeJS，JSON 支持实际上是内置的，也就是可以用： import Data from './data.json' 引入默认将正常运行。
要导入 CSV、TSV 和 XML，可以使用 csv-loader 和 xml-loader。
命令行输入：
npm install --save-dev csv-loader xml-loader
安装完成：
webpack.config.js
修改 webpack.config.js：
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource'
},
{
test: /\.(csv|tsv)$/i,
use: ['csv-loader']
},
{
test: /\.xml$/i,
use: ['xml-loader']
}
]
}
}
项目结构
在项目中添加 xml、csv 数据文件，此时项目结构：
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- data.xml
|- data.csv
|- OPPOSans-B.ttf
|- OPPOSans-H.ttf
|- logo.png
|- icon.png
|- style.css
|- index.js
|- /node_modules
src/data.xml
src/data.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>This is a test file~</body>
</note>
src/data.csv
src/data.csv 文件：
to,from,heading,body
Mary,John,Reminder,This is a test file
Zoe,Bill,Reminder,This is two test file
Autumn,Lindsey,Letter,Thank you
现在， import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量，将包含可直接使用的已解析 JSON：
修改 src/index.js 文件：
import _ from 'lodash';
import './style.css'
import Logo from './logo.png'
import Data from './data.xml';
import Notes from './data.csv';
function component () {
const element = document.createElement('div');
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// 将图像添加到div中
const myLogo = new Image();
myLogo.src = Logo;
element.appendChild(myLogo);
console.log('Data', Data);
console.log('Notes', Notes);
return element;
}
document.body.appendChild(component());
重新执行 npm run build 命令：
然后打开 dist/index.html，查看开发者工具中的控制台，可以看到，导入的数据会被打印出来：