如何在 Webpack 中加载静态 JSON 文件

在Webpack中加载静态JSON文件通常是一个相对简单的过程，因为Webpack默认支持JSON文件的加载和解析。在Webpack 2及以上版本中引入了内置的JSON导入支持，这使得操作更加简洁。下面我将阐述在Webpack中加载静态JSON文件的步骤，并结合一个具体的例子来说明。

步骤

1. 创建JSON文件： 首先，你需要创建一个JSON文件，例如 data.json，并填入相应的数据。

   json
   {
     "name": "ChatGPT",
     "type": "AI"
   }

2. 导入JSON文件： 在Webpack中，你可以像导入其他模块一样导入JSON文件。确保你的Webpack版本是2或更高，这样就不需要任何特殊的loader来处理JSON文件。

   javascript
   import data from './data.json';

   这行代码会将 data.json 文件中的全部内容导入到变量 data 中，你可以像使用其他普通JavaScript对象一样使用它。

3. 使用JSON数据： 导入JSON数据后，你可以在你的应用中任何需要的地方使用这些数据。

   javascript
   console.log(data.name);  // 输出: ChatGPT

示例

假设我们在开发一个简单的Web应用，需要从静态JSON文件中读取配置信息。

目录结构：

shell
.
├── src
│   ├── index.js
│   └── config.json
├── webpack.config.js
└── package.json

config.json:

json
{
  "apiUrl": "https://api.example.com",
  "timeout": 5000
}

index.js:

javascript
import config from './config.json';

function fetchData() {
  fetch(config.apiUrl, { timeout: config.timeout })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));
}

fetchData();

webpack.config.js:

javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

在这个例子中，Webpack将自动处理JSON文件的导入，开发者可以直接使用这些数据进行API请求等操作。这样可以有效地将配置信息与应用逻辑分离，增强代码的模块化和可维护性。