如何使用Webpack根据不同环境加载对应的json配置文件

推荐使用Webpack内置插件实现，无需额外安装依赖，完全适配你已有的分环境Webpack配置逻辑：

步骤1：准备配置文件 #

确认你已在项目对应目录存放两份环境配置文件：

• appsettings.development.json：开发环境配置
• appsettings.production.json：生产环境配置

步骤2：配置Webpack替换规则 #

在webpack.config.dev.js的plugins数组中新增如下配置：

const webpack = require('webpack');
module.exports = {
  // 保留你原有所有配置
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/.*\/appsettings\.json$/, (resource) => {
      resource.request = resource.request.replace(/appsettings\.json$/, `appsettings.development.json`);
    }),
    // 保留你原有其他插件配置
  ]
}

在webpack.config.prod.js中做相同配置，仅需把替换的文件名改为appsettings.production.json即可。

步骤3：代码中统一导入 #

在TypeScript代码中直接写固定导入语句即可，Webpack构建时会自动根据当前环境替换为对应配置文件：

import config from '../path/to/appsettings.json';
// 直接使用config作为全局配置即可

步骤4：适配TypeScript类型 #

为了避免TS识别不到配置文件类型报错，可以在项目类型声明目录（通常为@types文件夹）新增appsettings.d.ts文件：

declare module '*/appsettings.json' {
  // 根据你的实际配置字段定义类型
  interface AppConfig {
    apiBaseUrl: string;
    enableDebugLog: boolean;
    // 补充其他配置字段类型
  }
  const config: AppConfig;
  export default config;
}

替代方案：使用resolve.alias实现 #

如果你不想使用插件，也可以通过分环境配置别名实现：
在webpack.config.dev.js中新增别名配置：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@/appsettings.json': path.resolve(__dirname, '你的配置文件存放路径/appsettings.development.json')
    }
  }
}

生产环境配置同理，将别名指向appsettings.production.json，导入时直接使用别名路径即可：

import config from '@/appsettings.json';

注意事项 #

不要使用模板字符串的动态导入语法，Webpack静态构建时无法识别动态路径，会把所有匹配的JSON文件都打包进产物，既会增大包体积也可能泄露不同环境的敏感配置。

内容的提问来源于stack exchange，提问作者Jacek Ratajewski