是否可以使用 webpack 在浏览器中动态配置“publicPath”？答案

【问题标题】：Is it possible to have `publicPath` configured dynamically in the browser with webpack?是否可以使用 webpack 在浏览器中动态配置“publicPath”？
【发布时间】：2015-10-26 03:00:30
【问题描述】：

我有一个项目，我将相同的 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 而无需大量黑客攻击？

或者有更好的解决方案吗？

【问题讨论】：

嗨@Mike_Driver 你能在块文件脚本源之前生成CDN服务器路径吗？我尝试了 webpack_public_path 但没有运气。在这里查看我的问题link

标签： javascript webpack

【解决方案1】：

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

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

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

【讨论】：

我见过几个人提到这一点，但没有 - 有人上传了一个例子，你能了解一下入口文件的要点以及你是如何添加变量的吗？谢谢
您需要做的就是在您的入口点 js 文件中定义全局变量：__webpack_public_path__。因此，例如在我的main.js 中，我执行以下操作：__webpack_public_path__ = __DEV__ ? '/Development/' : '/Production/'; 其中__DEV__ 是我的构建过程中使用webpack.DefinePlugin 定义的编译时定义选项，但可以是您想要的任何东西。
请注意__webpack_public_path__ 必须是free variable 并且如果定义为全局变量则不起作用 例如window.__webpack_public_path__。
@Daniel 你能举个例子吗？我似乎无法让它工作。
请注意，文档链接已被删除，这里是新文档：webpack.js.org/configuration/output/#output-publicpath

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：