webpack之加载json数据格式

最新推荐文章于 2024-05-15 01:49:59 发布

H.z.x.....

最新推荐文章于 2024-05-15 01:49:59 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： webpack json javascript

本文链接：https://blog.csdn.net/weixin_43353035/article/details/126396025

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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