Javascript 是否可以在带有webpack的浏览器中动态配置“publicPath”？

我有一个项目，我将同一个WebpackJS包部署到多个不同的环境中。有些环境使用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

，而不需要大量的黑客攻击

---

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

好吧，我找了一整天，然后在决定发布到这里后发现了它

以防其他人需要：

解决方案是在进行生产构建时，在运行时定义

\uuuu网页包\uu公共路径\uuuu

。但要小心不要在开发中使用它，因为它会扰乱模块热加载

更多信息请点击此处：

---

我可以建议您使用我专门为此创建的插件

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

---

此外，如果需要，您可以直接使用应用程序中的资产。您可以使用类似于

webpack manifest plugin

的方法来创建清单文件，该文件将包含指向所有资产的所有路径以及正确的公共路径。您可以在运行时在客户端的某个位置从服务器请求此清单，也可以让服务器在发送到浏览器的初始html响应中包含的某些配置对象中包含此清单。

我看到有几个人提到过这一点，但没有人上传过示例，您能否了解输入文件的要点以及如何添加变量？谢谢，您需要做的就是在entrypoint js文件中定义全局变量：

\uuuu网页\uu公共路径\uuuu

。例如，在我的

main.js

中，我做了一些类似的事情：

\uuu网页\uu公共\uu路径\uuuu=\uu开发\uuuuuuuu？'/开发/'：'/生产/'其中
\uuu DEV\uuuu
是我的构建过程中用
网页定义的编译时定义的选项。DefinePlugin
但可以是您想要的任何内容。请注意，
\uuu网页包\uu public\u path\uuuuuu
必须是一个，如果定义为全局变量（如
窗口），则不起作用。\uuu网页包\uu public\u path\uucode>@Daniel请举个例子好吗？我似乎无法让它工作。请注意，文档链接已被删除，它位于新文档上：Hi@Mike\u Driver您是否能够在区块文件脚本源之前生成CDN服务器路径？我尝试了网页公开路径，但运气不好。看到我的问题了吗