Webpack 捆绑动态客户端配置

Question

我们有一个 node.js 应用程序捆绑用于使用 Webpack 的生产。

我们的问题是如何在已经有一个捆绑包后添加动态配置，而不需要重新捆绑？

在服务器端，我们可以只使用节点环境变量，但是如何为客户端包做到这一点呢？具体来说，我们需要告诉浏览器模块要连接到哪个 api 服务器地址。

拥有一个包含配置的 js/json 文件会导致配置值被注入到包中，因此之后无法更改（以一种舒适的方式，无需打开包文件并手动查找和替换）。

使用像 express-expose 这样的东西不是我们想要的，因为它会导致另一个网络请求获取数据，而我们的服务器地址是动态的。

node-config 等，不适用于客户端

Answer 1

您可以创造性地使用 externals 选项：

externals: [
    { appConfig: 'var appConfig' },
],

如果你把它添加到你的配置中，你可以让你的网络服务器在加载你的 webpack 包之前的某个地方添加一个带有 var appConfig = {"config":"value"}; 的脚本标签，一个简单的 require('appConfig') 就会把它捡起来.

Webpack bundle dynamic client config