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

Question

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

Webpack 有一个很好的设置公共(public)路径的特性:https://webpack.js.org/guides/public-path/但是有一些限制:

如果我不在构建时应用它，那么在 index.html 文件中呈现的所有内容都不会包含它

它是一个全局变量，在我的情况下无法使用 - 我无法为两个不同的微前端设置两个不同的值

有没有办法为使用 webpack 构建的应用程序使这样的公共(public) url 动态化？
我可以接受这样一个事实，即我必须手动更新 index.html 中的所有 url，但是我希望能够从其他一些 URL 获取所有其他资源(图像等)。
这通常类似于将 webpack 生成的所有资源托管在 CDN 上，并且 index.html 仍然从​​具有不同地址的 Web 服务器提供。

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'}
    }]
}

这是伪代码，不要在家里尝试这个，但你明白了。
代码和规则当然取决于您选择的服务器。

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