除了特定的 webpack loader对相应格式的数据文件解析之外，还可以通过自定义相应的JSON模块，完成对toml、yaml 或 json5等常用数据库格式文件的解析。

初始化示例工程

创建一个自定义数据格式文件解析的工程：webpack-parsedatafile。并进行初始化出操作：

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

工程结构如下：

工程结构

其中dist/index.html的文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 数据文件加载之自定义数据格式解析</title>
    <script src="bundle.js"></script>
</head>
<body>
    
</body>
</html>

加载及配置自定义数据资源

在src目录下创建toml、yaml 或 json5三个格式的数据文件，分别为data.toml、data.yaml及data.json5。

其中data.toml文件内容如下：

subject = "开会"

[content]
from = "张三"
to = "李四"
body = "明天上午8点会议开会儿"

data.yaml文件内容如下：

subject: "yaml 开会儿"
content:
  from: "张三"
  to: "李四"
  body: "明天上午8点开会儿"

data.json5文件内容如下：

{
    subject: "开会儿json5",
    content: {
        from: "张三",
        to: "李四",
        body: "明天上午8点会议开会儿"
    }
}

在src/index.js文件中引入上面三个数据文件，并输出数据文件中的相关内容：

import dataJson5 from './data.json5'
import dataYaml from './data.yaml'
import dataToml from './data.toml'

console.log("dataJson5",dataJson5)
console.log("dataJson5.subject",dataJson5.subject)
console.log("dataJson5.content.body",dataJson5.content.body)
console.log("dataYaml",dataYaml)
console.log("dataYaml.subject",dataYaml.subject)
console.log("dataYaml.content.body",dataYaml.content.body)
console.log("dataToml",dataToml)
console.log("dataToml.subject",dataToml.subject)
console.log("dataToml.content.body",dataToml.content.body)

在本地安装对toml、yaml 或 json5解析的模块：

npm install toml yamljs json5 --save-dev

然后在webpack的配置文件中，引入他们，并对配置对对应文件的解析。

const path = require('path')
const toml = require('toml')
const yamljs = require('yamljs')
const json5 = require('json5')

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.json5$/i,
                type: "json",
                parser: {
                    parse: json5.parse
                }
            },
            {
                test: /\.yaml$/i,
                type: "json",
                parser: {
                    parse: yamljs.parse
                }
            },
            {
                test: /\.toml$/i,
                type: "json",
                parser: {
                    parse: toml.parse
                }
            }
        ]
    }
}

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

npm run build

> [email protected] build D:\work\webpack5\webpack-parsedatafile
> webpack

asset bundle.js 771 bytes [emitted] [minimized] (name: main)
orphan modules 252 bytes [orphan] 3 modules
./src/index.js + 3 modules 800 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: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 458 ms

然后进入dist目录，并打开index.html，然后查看控制台输出内容。

控制台输出效果

玖叶教程网

前端编程开发入门

webpack5资源管理五之自定义JSON 模块使用详解

初始化示例工程

加载及配置自定义数据资源