webpack之加载json数据格式

203 阅读 0 评论 134 点赞

我是靠谱客的博主淡淡水池，这篇文章主要介绍webpack之加载json数据格式，现在分享给大家，希望可以做个参考。

webpack之加载json数据格式

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

第一种方法: 使用loader

所需 loader 的下载

yarn add csv-loader xml-loader -D

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

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

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

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

第一步需要先下载三个包

yarn add json5 taml yaml -D

在 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
            }
        }
    ]
}