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

【问题标题】：Inject Environment Variables at runtime with Webpack Module federation使用 Webpack 模块联合在运行时注入环境变量
【发布时间】：2021-12-01 10:42:45
【问题描述】：

关于Webpack 捆绑之后注入环境变量的问题已经被问及回答了。

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

但是在使用Webpack Module Federation 时，我们只暴露了一个component.js 文件，所以我如何在docker build 阶段捆绑源，但请阅读serving 阶段的环境变量（例如，当我们的 bundle 在 k8s 中作为 pod 运行时）。

【问题讨论】：

标签： webpack environment-variables micro-frontend webpack-module-federation

【解决方案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), }),

【讨论】：

但请注意，所有这些解决方案都在webpack 命令期间可用 - “构建”时间。现在假设我已经捆绑了我的代码，并用它创建了一个 Docker 映像。如何启动带有一些将在包中使用的环境变量的容器？
您可以在 Dockerfile 中构建应用程序，只需使用入口点命令
但是加载需要时间
我认为这并不能真正回答问题。在构建时将环境变量放入 docker 容器是一个已解决的问题。问题是关于运行时的，它没有被广泛理解的解决方案。