構建和運行時的環境變量 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”作為前綴。 這種在構建時設置環境變量以在運行時使用的方式為您提供了最大程度的控制，但也需要大量代碼。

有關其他方法的更多信息，您可以訪問此處