webpack 加载json,代码示例

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

webpack可以通过使用json-loader来加载JSON文件。JSON文件是一种轻量级的数据交换格式，常用于前后端数据传输和配置文件。

我们需要在webpack配置文件中添加json-loader作为模块的加载器。在module.rules中添加以下代码：


module: {
  rules: [
    {
      test: /\.json$/,
      use: 'json-loader'
    }
  ]
}

这段代码告诉webpack当遇到`.json`扩展名的文件时，使用json-loader来加载。

然后，在你的代码中，你可以通过import语句来引入JSON文件。例如，假设有一个名为data.json的文件，其中包含以下内容：


{
  "name": "John",
  "age": 25,
  "email": "john@example.com"
}

你可以使用以下代码将data.json文件导入到你的代码中：


import data from './data.json';
console.log(data.name); // 输出：John
console.log(data.age); // 输出：25
console.log(data.email); // 输出：john@example.com

这段代码将data.json文件导入为一个对象，并可以通过对象的属性来访问JSON文件中的数据。

需要注意的是，webpack默认会使用json-loader来加载JSON文件，所以你不需要额外安装json-loader包。但在较新版本的webpack中，json-loader已经被内置，所以你可以直接使用`use: 'json-loader'`，而不需要在配置文件中显式添加json-loader。

webpack 加载json,代码示例

相关阅读