使用webpack时如何设置环境变量？终端配置变量未生效怎么办

问题原因 #

该问题由webpack的默认安全限制导致：webpack构建前端产物时，为了避免服务端敏感环境变量泄露到浏览器端，默认不会把操作系统的全部环境变量自动注入到前端代码的process.env对象中，只有显式配置的变量才会被暴露。

第一步：验证环境变量传递链路 #

先确认终端的环境变量已经正确传递给了yarn启动的node进程：
在项目的webpack配置文件最顶部添加如下代码：

console.log('webpack进程获取到的FOO值：', process.env.FOO)

在同终端执行export FOO=bar && yarn start，如果终端输出了bar，说明环境变量传递到node进程的链路正常，问题确实出在webpack没有将变量注入前端代码。

第二步：配置webpack注入指定环境变量 #

二选一即可：

方式1：使用webpack内置DefinePlugin（适合少量变量场景） #

在webpack配置中手动声明要注入前端的环境变量：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 原有其他配置保持不变
  plugins: [
    new webpack.DefinePlugin({
      'process.env.FOO': JSON.stringify(process.env.FOO),
      // 其他需要注入的变量可按相同格式在此添加
    })
  ]
}

注意必须用JSON.stringify()包裹变量值，因为DefinePlugin是做直接的文本替换，需要保证字符串值被正确包裹引号。

方式2：使用dotenv-webpack插件（适合多变量场景） #

如果需要批量注入变量，可使用该插件同时读取.env文件和系统环境变量：

1. 安装依赖：yarn add dotenv-webpack -D
2. 修改webpack配置：

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  // 原有其他配置保持不变
  plugins: [
    new Dotenv({
      systemvars: true, // 开启读取系统环境变量的能力
    })
  ]
}

开启systemvars: true后，所有系统环境变量都可以在前端代码中通过process.env读取，也可通过path参数指定自定义的env文件路径。

注意事项 #

• 不要把敏感信息（比如密钥、内部接口地址）通过该方式注入前端，所有注入到process.env的变量都会被打包到公开的前端产物中，所有人都可查看。
• 生产环境构建时不要开启systemvars: true，避免意外泄露服务端的敏感环境变量。

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