如何部署Webpack 4可识别为拆分模块的原生JSON文件？

我太懂你这种搜关键词搜不到想要内容的憋屈了！你要的其实就是让Webpack 4把一个独立的原生JSON文件当成可拆分的模块，同时不把它打包进主应用bundle里，部署时还能轻松替换这个JSON对吧？我之前也遇到过类似需求，折腾了好一阵才找到靠谱的方案，分享给你：

核心思路 #

我们要实现两个关键点：一是让Webpack把这个JSON当成独立的拆分chunk，二是保留它的原生JSON格式（不带Webpack运行时或模块模板），这样部署时可以直接修改或替换它。

第一步：用动态导入加载JSON #

别用静态import，而是用import()动态导入，这样Webpack会自动把它当成一个独立的chunk处理，不会打包进主bundle：

// 封装一个加载配置的异步函数
async function loadAppConfig() {
  try {
    // 这里的路径要对应你实际的JSON文件位置
    const configModule = await import('../config/app-config.json');
    // 因为file-loader返回的是文件URL，我们需要用fetch来获取原生JSON
    const response = await fetch(configModule.default);
    return await response.json();
  } catch (error) {
    console.error('加载配置文件失败:', error);
    // 返回默认配置作为降级方案
    return { apiUrl: 'https://default-api.com' };
  }
}

// 在应用初始化时调用
loadAppConfig().then(config => {
  console.log('当前配置:', config);
  // 用配置初始化应用
});

这里要注意：因为我们用file-loader处理JSON，动态导入返回的是文件的URL，所以需要再用fetch去获取原生JSON内容，这样才能拿到纯JSON对象。

第二步：配置Webpack处理原生JSON #

在webpack.config.js里添加规则，确保Webpack保留JSON的原生格式，同时把它复制到输出目录：

module.exports = {
  // ...你的其他Webpack配置
  module: {
    rules: [
      {
        // 匹配你的配置JSON文件，用文件名或者路径来精准匹配
        test: /app-config\.json$/,
        // 禁用Webpack默认的JSON转JS模块处理，保留原生格式
        type: 'javascript/auto',
        use: [
          {
            loader: 'file-loader',
            options: {
              // 输出时保留原文件名，方便部署时识别
              name: '[name].[ext]',
              // 输出到dist目录下的config文件夹，可根据你的部署结构调整
              outputPath: 'config/',
              // 生成的文件URL前缀，确保运行时能正确访问
              publicPath: '/config/',
            },
          },
        ],
      },
    ],
  },
};

这里的type: 'javascript/auto'是关键——Webpack默认会把JSON解析成JS模块（比如把{"key": "value"}转成module.exports = {"key": "value"}），加上这个配置就能让它跳过这个步骤，保留纯JSON文件。

第三步：确保JSON文件被复制到输出目录 #

如果你的源JSON文件不在Webpack的入口依赖链里（比如手动放在项目根目录），可以用copy-webpack-plugin自动把它复制到构建输出目录：

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

module.exports = {
  // ...其他配置
  plugins: [
    new CopyPlugin({
      patterns: [
        // 源文件路径 -> 目标输出路径
        { from: './app-config.json', to: 'config/app-config.json' },
      ],
    }),
  ],
};

这样构建完成后，你就能在dist/config/目录下看到原生的app-config.json文件了，部署时直接替换这个文件就行，不用重新构建整个应用。

为什么之前搜不到相关内容？ #

你用的关键词比如webpack dynamic configuration file确实容易指向Webpack自身的动态配置（比如根据环境切换webpack.config.js），而我们要的是应用层面的动态配置文件，换成webpack external native json as chunk或者webpack load unbundled json file这类关键词，更容易找到匹配的解决方案。

内容的提问来源于stack exchange，提问作者John Freeman