是否可以在浏览器中使用webpack动态配置`publicPath`？

Question

我有一个项目，我将相同的webpack JS包部署到多个不同的环境。有些环境使用CDN来提供像JS文件这样的静态资产，而有些环境则只使用与项目其余部分相同的根提供静态资产。

这个项目还有多个异步webpack块，所以我定义了一个publicPath来正确加载它们。

当部署到非cdn时，webpack在我的webpack配置中使用静态配置的publicPath正常工作，可以提供/static/之类的所有内容。

但是，当部署到使用CDN的环境时，这不再适用于异步块，因为webpack将尝试从/static/访问这些，这意味着他们会询问主应用服务器而不是CDN。

显然，我可以使用publicPath中的CDN重新构建项目以解决此问题。但是，我更喜欢在这两种情况下只使用一个部署包。

我的服务器端应用程序提供了一个javascript全局详细说明CDN根路径，沿window.staticCDNRoot行。而且这种全局性也出现在非cdn情况下，只是指向应用服务器 - 所以它总是解析到正确的位置来加载静态资产。

有什么方法可以让webpack在运行时使用它，以便publicPath成为window.staticCDNRoot + publicPath而没有大量的hackery？

或者这个问题有更好的解决方案吗？

Answer 1

好的，所以我整天都在寻找这个，然后在决定发布之后找到它！

以防万一其他人需要这个：

解决方案是在进行生产构建时在运行时定义__webpack_public_path__。但要注意不要在开发中使用它，因为它会弄乱模块热负载。

更多信息：

http://webpack.github.io/docs/configuration.html#output-publicpath

Answer 2

我可以建议使用我专门为此目的创建的https://github.com/agoldis/webpack-require-from插件

Answer 3

如果您只有少数几个不同的环境，请继续并抽象一个Webpack配置（在共享配置之上），该Webpack配置具有每个所需的不同publicPath。这不会对您的构建管道产生太大的额外影响。然后在您的应用程序中，当您从特定的环境/服务器/ cdn中获取主/运行时Webpack块时，Webpack将拾取其他块和正确对应的异步块。

此外，如果需要，您可以直接使用应用程序中的资产。您可以使用类似webpack-manifest-plugin的方式来创建清单文件，该清单文件将包含具有正确公共路径的所有资产的所有路径。您可以在运行时从客户端某处的服务器请求此请求，也可以让服务器将此清单包含在发送到浏览器的初始html响应中包含的某些配置对象中。