.xml文件用什么打开 webpack5资源管理四之加载数据文件使用详解

webpack除了可以处理加载页面资源文件引用之外，还可以加载的资源有数据文件，如 JSON 、CSV、TSV 和 XML格式的文件。类似于 NodeJS， 内置的支持JSON格式的数据，其可以通过 import Data from './data.json' 引入并正常运行。但是要导入 CSV、TSV 和 XML格式的文件，需要使用 对应的csv-loader 和 xml-loader的loader.xml文件用什么打开，来处理加载这三类文件。

初始化示例工程

创建一个工程名为：webpack-datafile，并进行相应内容的初始化。

mkdir webpack-datafile
cd webpack-datafile
npm init -y
npm install webpack webpack-cli --save-dev

工程目录结构如下：

工程目录结构

加载及配置数据资源

手下在src目录下添加数据资源文件data.xml.xml文件用什么打开，data.csv。

其中data.xml文件的内容如下：

  张三
  李四
  会议
  明天上午8点，会议室开会！

data.csv的内容

from,to,subject,body
张三,李四,会议,明天上午8点开会
李四,王五,采购,明天采购一台笔记本

然后在src/index.js中，引入数据文件，并进行数据的读取操作。

import email from './data.xml'
import emails from './data.csv'
console.log(email)
console.log(emails)

执行在本地安装 数据解析loader：csv-loader 和 xml-loader

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

完善webpack的配置文件，使其进行项目构建时可以解析xml、csv格式的文件：

const path=require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /.xml$/i,
                use: ['xml-loader']
            },
            {
                test: /.csv$/i,
                use: ['csv-loader']
            }
        ]
    }
}

然后执行npm run build进行项目的构建。

npm run build
> webpack-datafile@1.0.0 build D:workwebpack5webpack-datafile
> webpack
asset bundle.js 753 bytes [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
cacheable modules 399 bytes
  ./src/index.js 106 bytes [built] [code generated]
  ./src/data.xml 131 bytes [built] [code generated]
  ./src/data.csv 162 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: http://webpack.js.org/configuration/mode/
webpack 5.28.0 compiled with 1 warning in 579 ms

进入构建之后的目录并打开index.html，查看控制台输出的数据内容：

效果

可以看到，控制台输出一个对象和一个数组。

admin普通

打赏 收藏 海报 链接