构建和运行时的环境变量 webpack 5

Question

在我的代码中，我需要在运行时而不是构建时定义 process.env。 有什么办法可以实现吗？ 我想出于特定原因构建 bundle 并使用 envs 来确定环境，但是该应用程序运行在与构建它不同的机器上，因此我需要在构建时和运行时传递一些 envs。

区分 envs 的 webpack 方法是什么 - 这些在构建时可用，而这些在运行时可用？

"build": "webpack --mode=production",
"build:qa": "ENV=qa webpack --mode=production",
"build:prod": "ENV=prod webpack --mode=production",

Answer 1

Webpack 的 DefinePlugin 允许您创建可以在编译时配置的全局变量。 这使您能够更改代码在不同环境（例如生产环境和开发环境）中的行为。

这是您可以使用 DefinePlugin 的方式：

new webpack.DefinePlugin(
 Object.keys(process.env)
 .filter((key) => key.startsWith(‘WEBPACK_DEMO_’))
 .reduce(
 (result, key) => ({
 …result,
 [`process.env.${key}`]: JSON.stringify(process.env[key])
 }),
 {}));
```

这会遍历您在本地“process.env”中的密钥，并将它们过滤为仅以字符串“WEBPACK_DEMO_”开头的密钥。 然后它通过这些键进行缩减，并从这些键中构建一个 object，并以“process.env”作为前缀。 这种在构建时设置环境变量以在运行时使用的方式为您提供了最大程度的控制，但也需要大量代码。

有关其他方法的更多信息，您可以访问此处