Webpack捆绑动态客户端配置 [英] Webpack bundle dynamic client config

问题描述

我们捆绑了一个node.js应用，供使用Webpack进行生产。

We have a node.js app bundled for production using Webpack.

我们的问题是在拥有捆绑包之后如何添加动态配置，而无需重新捆绑？

Our problem is how to add dynamic configuration after you already have a bundle, without the need to re-bundle?

在服务器端，我们只能使用节点env变量，但是如何为客户端捆绑包完成此操作？具体来说，我们需要告诉浏览器模块要连接到哪个api服务器地址。

On the server-side, we can just use node env variables, but how can this be done for the client bundle? Specifically, we need to tell a browser module to which api server address to connect.

具有配置的js / json文件会导致将配置值注入到包，因此以后不能更改（以舒适的方式，无需打开包文件并手动查找和替换）。

Having a js/json file with the configurations causes the configuration values to be injected into the bundle, and therefore can't be changed afterwards (in a comfortable manner, without open the bundle file and manually finding and replacing).

使用诸如express-expose之类的方法，这不是我们想要的东西，因为它导致另一个网络请求获取数据，并且我们的服务器地址是动态的。

Using something like express-expose, isn't something we want, since it causes another network request to get the data, and our server address is dynamic.

节点配置等，在客户端不起作用

node-config etc., don't work on client side

推荐答案

您可以创造性地使用外部项目选项：

You can make creative use of the externals option:

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

如果将其添加到配置中，则只需让您的Web服务器在加载前的某个位置添加 var appConfig = { config： value}; 的脚本标签即可您的webpack捆绑包中的一个，然后一个简单的 require（'appConfig'）就会将其拾取。

If you add that to your configuration you can just let your web server add a script tag with var appConfig = {"config":"value"}; somewhere before the loading of your webpack bundle, and a simple require('appConfig') will pick it up.

这篇关于Webpack捆绑动态客户端配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！