如何在Webpack中导入/提供本地JSON文件以生成图表数据？

数据老陈

2026-7-12

Webpack中加载本地JSON文件的正确方法

方法一：直接导入JSON文件（推荐）

Webpack原生支持直接导入JSON模块，不需要用fetch，写法更简洁：

// 根据你的文件实际位置调整路径，比如js在src目录，testdata也在src下就用这个路径
import rowsData from './testdata/rows.json';

(async function() {
  console.log(rowsData);
  // 直接用rowsData就行，不用再做fetch和JSON解析
  // ... 省略后续代码
})();

注意：路径要和你的目录结构匹配——如果testdata在项目根目录，而你的js文件在src里，路径就得写成../testdata/rows.json。这种方式会把JSON内容打包进最终的bundle里，适合数据量不大的场景。

方法二：配置静态资源目录，用fetch访问

如果必须用fetch（比如数据量太大不想打包进bundle，或者需要动态加载），得让Webpack把静态资源复制到输出目录：

1. 安装插件

npm install copy-webpack-plugin --save-dev

2. 修改webpack.config.js

在配置文件里引入插件并添加到插件列表：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他原有配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        // 把本地的testdata目录复制到输出目录（默认是dist）
        { from: 'testdata', to: 'testdata' },
      ],
    }),
  ],
};

3. 重启开发服务器

修改配置后，重启npm start之类的命令，之后原来的fetch代码就能正常工作了：

(async function() {
  const response = await fetch('/testdata/rows.json');
  const data = await response.json();
  console.log(data);
  // ... 省略后续代码
})();