加载数据

除了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，查看开发者工具中的控制台，可以看到，导入的数据会被打印出来：

在这里插入图片描述

webpack5 学习五—— 管理资源：加载数据

加载数据

webpack.config.js

项目结构

src/data.xml

src/data.csv

相关推荐