非Create React App的webpack项目脚本设置环境变量为何无法生效？

问题原因 #

Create React App的react-scripts工具会自动识别并注入前缀为REACT_APP_的环境变量到客户端代码中，但纯Webpack项目没有这个内置处理逻辑。你在package.json脚本中设置的REACT_APP_ENV仅存在于Shell进程环境中，Webpack编译时不会自动将其传递到客户端bundle里，导致运行时process.env.REACT_APP_ENV返回undefined。

解决方案 #

需要通过Webpack的DefinePlugin插件手动将Shell环境中的变量注入到客户端代码，具体步骤如下：

1. 修改Webpack生产配置文件 #

在./bundler/webpack.prod.js中引入Webpack的DefinePlugin，并配置注入环境变量：

const webpack = require('webpack');

module.exports = {
  // 保留你已有的entry、output、module等配置
  plugins: [
    // 注入环境变量到客户端代码
    new webpack.DefinePlugin({
      // 必须用JSON.stringify转换，确保客户端拿到的是字符串字面量
      'process.env.REACT_APP_ENV': JSON.stringify(process.env.REACT_APP_ENV)
    }),
    // 保留你已有的dotenv-webpack等其他插件
  ]
};

2. 修正package.json脚本写法 #

确保环境变量直接作用于Webpack命令（Shell中VAR=value cmd的写法会让变量仅在cmd进程中生效）：

"scripts": {
  "serve:production": "REACT_APP_ENV=version-a webpack --config ./bundler/webpack.prod.js && serve ./dist -l 4000"
}

验证 #

运行npm run serve:production后，Webpack会读取Shell环境中的REACT_APP_ENV值，通过DefinePlugin替换客户端代码中的process.env.REACT_APP_ENV为实际字符串，此时console.log(process.env.REACT_APP_ENV)会正确输出version-a。

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