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

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

Webpack有一个很好的设置公共路径的功能：但是有一些限制：

• 如果我没有在构建时应用它，那么index.html文件中呈现的所有内容都不会包含它
• 这是一个全局变量，使得它在我的情况下不可用-我不能为两个不同的微前端设置两个不同的值

有没有办法让用webpack构建的应用程序的公共url动态化？ 我可以接受这样一个事实：我将不得不手动更新index.html中的所有URL，但是我希望能够从其他URL获得的所有其他资源（图像等）。

---

这通常类似于在CDN上托管webpack生成的所有资源，并且仍然从具有不同地址的web服务器提供index.html

我认为此功能应该在前端服务器（nginx/apache/node）上配置，而不是在网页上配置。
看起来您只需要为其配置一个代理。 例如，对于

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

找到一些解决方案。我在不同的服务器上使用不同的根安装了相同的应用程序构建。在我的例子中，publicPath解决了这个问题，我只需要用服务器变量替换和“修复”我的网页条目来调整html

我的条目如下所示，首先应加载修复程序：

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>

__PUBLIC_PATH_uuu=“@SERVER_SIDE_PUBLIC_PATH@”；

---

从未测试过用cdn URL替换@SERVER\u SIDE\u PUBLIC\u PATH@，但我认为它会起作用。

这种方法对我来说唯一的问题是，您再次使用了全局变量。我想加载更多的应用程序，因此需要能够为每个应用程序传递不同的公共路径。是的，它是一个全局变量，但不必在构建或js代码中设置。正如您所说，“我可以接受这样一个事实，即我将不得不手动更新index.html中的所有URL”，因此您只需要在index.html中再更新一个值。您可以使用指向同一捆绑包的多个不同html文件。是否要在同一环境中多次加载同一捆绑包？像从一边到另一边？或者类似于“关闭”一个应用程序，然后通过在同一页面上卸载和加载更多bundes来“打开”另一个应用程序？Microsoft制作了一个插件，可以为您工作：