是否可以在浏览器中动态配置“publicPath”?

Is it possible to have `publicPath` configured dynamically in the browser with webpack?

本文关键字：配置 publicPath 动态浏览器是否更新时间：2023-09-26

我有一个项目，我在多个不同的环境中部署了相同的webpack JS包。有些环境使用CDN来提供像JS文件这样的静态资源，而有些环境则不这样做，只是从与项目其余部分相同的根目录提供静态资源。

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

当部署到非cdn时，webpack可以很好地在我的webpack配置中静态配置publicPath，服务于/static/等所有内容。

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

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

我的服务器端应用程序提供了一个详细描述CDN根路径的javascript全局，如下window.staticCDNRoot所示。这个全局变量也存在于非cdn情况下，只是指向应用服务器——所以它总是解析到加载静态资源的正确位置。

有什么办法我可以让webpack利用这在运行时，使publicPath成为window.staticCDNRoot + publicPath没有巨大的黑客?

或者有更好的解决方案?

好的，所以我整天都在找这个，然后在决定在这里发布之后发现了它!

以防有人需要这个:

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

更多信息在这里:

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

我可以建议使用在https://github.com/agoldis/webpack-require-from插件，我已经创建了专门为这个目的

如果你只有几个不同的环境，那就继续抽象一个webpack配置(在共享配置之上)，每个配置都有你需要的不同的publicPath。这应该不会对您的构建管道造成太多的额外影响。然后，在你的应用程序中，当你从一个特定的环境/服务器/cdn中获取主/运行时webpack块时，webpack将拾取正确对应的其他块和异步块。

如果需要的话，你也可以直接使用应用中的资源。您可以使用webpack-manifest-plugin之类的东西来创建一个清单文件，它将包含所有资产的所有路径，并使用正确的公共路径。你可以在运行时从你的服务器请求这个清单，或者你可以让你的服务器把这个清单包含在一些配置对象中，包括在发送给浏览器的初始html响应中。