如何强制Webpack为资源生成动态publicPath

Question

我正在尝试实现一个MicroFrontend主机应用程序，该应用程序能够引导使用webpack构建的一个或多个React应用程序。为此，我需要强制应用程序从某个不同的URL加载其资源-而不仅仅是使用相对路径。

Webpack有一个很好的功能来设置公共路径: https://webpack.js.org/guides/public-path/，但是有一些限制:

• 如果我不在构建时应用它，则索引文件中呈现的所有内容都不会包括它 • 它是一个全局变量，使其在我的情况下无法使用-我不能为两个不同的微前端设置两个不同的值

是否有任何方法使webpack构建的应用程序的公共URL变得动态？ 我可以接受这样一个事实：我将不得不手动更新index.html中的所有URL，但是其他所有资源（图像等）我希望能够从其他URL获取。 总的来说，这与在CDN上托管由webpack生成的所有资源并仍然从具有不同地址的Web服务器提供index.html类似。

- kubal5003

Answer 1

我认为这个功能应该在你的前端服务器（nginx/apache/node）上进行配置，而不是webpack。
看起来你只需要一个代理配置。
例如对于webpack-dev-server，你可以尝试在localhost上使用类似以下的配置：

devServer: {
  proxy: [{
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/sounds': '/shared/sounds'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/sounds': '/path/to/cdn'}
    }]
}

这是伪代码，请勿在家中尝试，但你已经得到了思路。
当然，代码和规则取决于您选择的服务器。

附注：但这是一个非常有趣的问题，我将尝试使用webpack找到一些解决方案。

- nickbullock

Answer 2

我有一个设置，使用不同的根在不同的服务器上构建相同的应用程序。在我的情况下，On The Fly publicPath 解决了这个问题，我只需要使用服务器变量替换调整HTML并“修复”我的webpack条目。

我的条目像这样，修复应该是第一件加载的事情：

entry : {
    entryfile: [ "./fix-public-path.js", "./entryfile.js" ];
}

./fix-public-path.js 包含以下内容：

if (window.__PUBLIC_PATH__) {
  __webpack_public_path__ = window.__PUBLIC_PATH__; // eslint-disable-line
}

我的索引文件中第一个脚本是这个：

<script>
    __PUBLIC_PATH__ = "@SERVER_SIDE_PUBLIC_PATH@";
</script>

从未尝试过将@SERVER_SIDE_PUBLIC_PATH@替换为CDN URL，但我认为它会起作用。

- Filipe Borges

---

这种方法对我唯一的问题是，你又在使用全局变量。我想要加载更多的应用程序，为此需要能够传递给每个应用程序不同的公共路径。 - kubal5003

是的，它是一个全局变量，但它不必在构建或js代码中设置。正如你所说的“我可以接受这个事实，我将不得不手动更新index.html中的所有url”，所以你只需要在index.html中更新一个值。你可以使用多个不同的html文件指向同一个bundle。 - Filipe Borges

您想在同一环境中多次加载相同的捆绑包吗？就像并排打开一样？或者像通过卸载和加载更多捆绑包在同一页上“关闭”一个应用程序并“打开”另一个应用程序一样？ - Filipe Borges

微软开发了一个插件，可能适合你使用：https://github.com/microsoft/rushstack/tree/master/webpack/set-webpack-public-path-plugin - Filipe Borges