如何配置Webpack启动脚本以切换指定API环境？

不用手动注释代码，直接利用Webpack的环境变量机制就能实现不同命令下自动切换API地址，下面提供两种常用方案：

方案一：Webpack DefinePlugin 直接注入（无需额外插件） #

1. 修改 package.json 脚本，指定环境 #

先安装 cross-env 兼容不同系统的环境变量设置：

npm install cross-env --save-dev

修改 package.json 的 scripts 字段：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development",
  "start": "cross-env NODE_ENV=production webpack --mode production"
}

2. 配置 Webpack 注入全局变量 #

在 webpack.config.js 中添加 DefinePlugin 插件，根据环境注入对应的API地址：

const webpack = require('webpack');

module.exports = {
  // 其他Webpack配置（入口、输出、loader等）...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_BASE_URL': JSON.stringify(
        process.env.NODE_ENV === 'production' 
          ? 'https://abc_loginapi.com' 
          : 'http://localhost:9500/login'
      )
    })
  ]
};

3. 代码中直接使用全局变量 #

替换原来的手动切换代码：

export const API_HOST_LIST = {
  HostBaseURL: process.env.API_BASE_URL
};

方案二：使用 .env 文件管理配置（更灵活，适合多环境） #

如果需要管理更多环境配置（不止API地址），推荐用 .env 文件配合 dotenv-webpack 插件：

1. 安装依赖 #

npm install dotenv-webpack cross-env --save-dev

2. 创建环境配置文件 #

在项目根目录创建两个文件：

• .env.development（开发环境）：

API_BASE_URL=http://localhost:9500/login

• .env.production（生产环境）：

API_BASE_URL=https://abc_loginapi.com

3. 修改 Webpack 配置加载对应 .env 文件 #

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new Dotenv({
      path: process.env.NODE_ENV === 'production' 
        ? './.env.production' 
        : './.env.development'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

4. 代码中使用方式和方案一一致 #

export const API_HOST_LIST = {
  HostBaseURL: process.env.API_BASE_URL
};

注意事项 #

• 确保Webpack配置中正确设置了 mode（development/production），这会影响Webpack的默认优化策略。
• 如果使用 webpack-dev-server，修改配置后需要重启服务才能生效。

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