使用 Webpack 模块联合在运行时注入环境变量

Question

关于与Webpack捆绑后注入环境变量的问题已经被提出并回答。

答案始终基于在index.html文件中加载更新的环境变量。

但是，当使用Webpack Module Federation时，我们仅公开一个component.js文件，因此如何在该阶段捆绑源代码，但在docker build服务阶段读取环境变量（例如，当我们的捆绑包作为 k8s 内的 pod 运行时）。

Answer 1

在 webpack.config 中

const webpack = require('webpack');       
require('dotenv').config({ path: './.env' }); 

然后在插件模块部分添加这个

new webpack.DefinePlugin({
  "process.env": JSON.stringify(process.env);
}),

这将从机器中对所有环境变量进行编码。

这种方式还需要另一个改进，这样您可以创建类似.env.development或.env.production

module.exports = (env, args) => {
    require("dotenv").config({ path: `./.env.${args.mode}` });

如果您只想传递您在 .env 文件中定义的环境变量，只需将要求更改为：

const dotenv = require("dotenv").config({ path: ./.env.${args.mode}` }); 

和 DefinePlugin 到此：

new webpack.DefinePlugin({ "process.env": JSON.stringify(dotenv.parsed), }),