webpack之加载json数据格式

webpack之加载json数据格式

webpack中可以加载的有用资源还有数据, 如 json 文件, csv, tsv, xml, 如果需要导入这些格式的数据, 第一种方法是: 我们需要两个 loader 去加载这些格式的数据. 第二种方法是: 我们可以使用自定义的 json 模块 parser 去解析这些数据.

第一种方法: 使用loader

1. 所需 loader 的下载

yarn add csv-loader xml-loader -D

1. 在 webpack.config.js 文件中进行配置

module: {
    rules: [
        {
            test: /\.(csv|tsv)$/,
            use: ['csv-loader']
        },{
            test: /\.xml$/,
            use: ['xml-loader']
        }
    ]
}

第二种方法: 使用自定义的 json 模块 parser 进行解析

假如现在我们有三个后缀名字分别为 json5, taml, yaml 的文件

1. 第一步需要先下载三个包

yarn add json5 taml yaml -D

1. 在 webpack.config.js 文件中进行配置

const json5 = require('json5');
const taml = require('taml');
const yaml = require('yaml');

module: {
    rules: [
        {
            test: /\.json5$/,
            parser: {
                parse: json5.parse
            }
        },{
            test: /\.taml$/,
            parser: {
                parse: json5.parse
            }
        },{
            test: /\.yaml$/,
            parser: {
                parse: yaml.parse
            }
        }
    ]
}