Webpack Module Federation加载Chunk时URL错误问题求助

项目架构 #

• React宿主（运行于localhost:3000）
• Angular Remote 1（运行于localhost:4201）
• Angular Remote 2（运行于localhost:4202）

问题现象 #

单独运行任意一个远程应用时无异常，但同时运行两个远程应用时，加载过程中__webpack_require__.p会被其中一个远程的脚本修改，导致另一个远程的Chunk从错误URL加载，无法正常运行。

当前配置 #

React宿主配置 #

...
new ModuleFederationPlugin({
      name: "react_host",
      filename: "remoteEntry.js",
      remotes: {
        angular_remote_1: "angular_remote_1@http://localhost:4201/angular_remote_1.js",
        angular_remote_2: "angular_remote_2@http://localhost:4202/angular_remote_2.js"
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
...

Angular Remote 1配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
    output: {
        publicPath: "auto",
        uniqueName: "angular_remote_1",
        scriptType: "text/javascript"
    },
    optimization: {
        runtimeChunk: false
    },
    experiments: {
        outputModule: true
    },
    plugins: [
        new ModuleFederationPlugin({
            name: "angular_remote_1",
            library: { type: "var", name: "angular_remote_1" },
            filename: "angular_remote_1.js",
            exposes: {
                './angularRemote1': './src/loadAngularRemote1.ts',
            },
            shared: ["@angular/core", "@angular/common", "@angular/router"]
        })
    ],
};

Angular Remote 2配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
    output: {
        publicPath: "auto",
        uniqueName: "angular_remote_2",
        scriptType: "text/javascript"
    },
    optimization: {
        runtimeChunk: false
    },
    experiments: {
        outputModule: true,
    },
    plugins: [
        new ModuleFederationPlugin({
            name: "angular_remote_2",
            library: { type: "var", name: "angular_remote_2" },
            filename: "angular_remote_2.js",
            exposes: {
                './angularRemote2': './src/loadAngularRemote2.ts',
            },
            shared: ["@angular/core", "@angular/common", "@angular/router"]
        })
    ],
};

已尝试的解决方法 #

• 调整publicPath（在auto与硬编码值之间切换）
• 为两个远程应用配置自定义chunkLoadingGlobal

恳请提供可行的解决方案。

内容的提问来源于stack exchange，提问作者BarniPro