Webpack下Dotenv与EnvironmentPlugin冲突处理及systemvars安全性疑问

原Webpack插件配置：

plugins: [
    new HtmlWebpackPlugin({
      template: './public/template.html',
    }),
    new webpack.EnvironmentPlugin(['API_HOST', 'OS']),
    new Dotenv({
      path: path.resolve(__dirname, '.', '.env.dev'),
      safe: true,
    }),
],

新需求：优先使用系统环境变量，当系统环境变量不存在时， fallback 到.env.dev中的变量。已知Dotenv的systemvars=true可实现此功能，但只想引入API_HOST和OS这两个变量，因此尝试单独使用EnvironmentPlugin：

new webpack.EnvironmentPlugin(['API_HOST', 'OS']),

同时使用EnvironmentPlugin与Dotenv时出现冲突警告：

Compiled with problems:

WARNING

DefinePlugin
Conflicting values for 'process.env.API_HOST'

提出两个问题：

1. 不使用systemvars参数的情况下，是否有办法实现上述需求？
2. 使用systemvars参数是否安全，会不会泄露敏感信息？

问题1：不使用systemvars参数的实现方案 #

可以手动合并系统环境变量与.env文件变量，再通过DefinePlugin注入，彻底避免插件冲突：

1. 读取.env文件内容：

const dotenv = require('dotenv');
const envFromFile = dotenv.config({ path: path.resolve(__dirname, '.', '.env.dev'), safe: true }).parsed;

2. 手动合并变量：优先取系统环境变量，无对应值时使用.env文件中的内容

const mergedEnv = {
  API_HOST: process.env.API_HOST || envFromFile?.API_HOST,
  OS: process.env.OS || envFromFile?.OS
};

3. 通过DefinePlugin注入到Webpack配置：

plugins: [
  new HtmlWebpackPlugin({ template: './public/template.html' }),
  new webpack.DefinePlugin({
    'process.env.API_HOST': JSON.stringify(mergedEnv.API_HOST),
    'process.env.OS': JSON.stringify(mergedEnv.OS)
  })
]

这种方式完全由你控制变量来源，既不会出现插件冲突，也无需依赖Dotenv的systemvars参数。

问题2：systemvars参数的安全性 #

使用systemvars=true本身不会主动泄露敏感信息，但需要注意以下风险点：

• 该参数会将系统所有环境变量与.env文件变量合并（系统变量优先级更高），但只要你通过EnvironmentPlugin只指定了API_HOST和OS，最终只有这两个变量会被注入到代码中，其他系统变量不会被打包。
• 真正的风险在于：如果你的系统环境或.env文件中存在敏感信息（如密钥、Token），且你不小心将这些敏感变量加入到EnvironmentPlugin的列表中，它们就会被打包进前端代码，从而造成泄露。
• 总结：只要严格控制EnvironmentPlugin的变量列表，只引入需要的API_HOST和OS，使用systemvars=true是安全的。如果担心误引入其他变量，问题1的手动合并方案会更稳妥。

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