设置publicPath后Webpack模块联邦无法正确加载微前端资源

问题场景 #

我有一个Angular壳应用和一个基于Webpack模块联邦的React微前端（MFE），原本配置运行正常：

• MFE的Webpack输出配置：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'auto',
},

• 壳应用加载配置：

loadRemoteModule({
  remoteEntry: "http://localhost:3000/remoteEntry.js",
  remoteName: "prompt_mfe",
  exposedModule: "./Prompt",
});

当需要将MFE部署在/mfe-prompt/路径下，修改配置后出现404错误：

• MFE修改后的Webpack输出配置：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/mfe-prompt/',
},

• 壳应用修改后的加载配置：

loadRemoteModule({
  remoteEntry: "http://localhost:3000/mfe-prompt/remoteEntry.js",
  remoteName: "prompt_mfe",
  exposedModule: "./Prompt",
});

此时网络面板报错：

GET http://localhost:4201/mfe-prompt/src_containers_Prompt_Prompt_tsx.bundle.js net::ERR_ABORTED 404 (Not Found)

问题原因 #

核心问题是模块联邦生成的模块路径基准错误：

1. MFE的publicPath设置为相对路径/mfe-prompt/时，Webpack会在remoteEntry.js中记录相对路径的模块地址。
2. 当Angular壳应用加载remoteEntry.js后，浏览器会以**壳应用的域名（localhost:4201）**为基准拼接模块路径，而非MFE的域名（localhost:3000），导致请求错误地址。
3. 报错中的src_containers_Prompt_Prompt_tsx.bundle.js是MFE暴露模块的实际打包产物，只是被浏览器错误指向了壳应用端口。

解决方案 #

修改MFE的publicPath为绝对路径 #

将MFE的output.publicPath设置为包含完整域名和端口的绝对路径，确保模块路径指向MFE的正确地址：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 改为完整绝对路径，包含MFE的域名、端口和路径
    publicPath: 'http://localhost:3000/mfe-prompt/',
},

壳应用的remoteEntry配置保持不变：

loadRemoteModule({
  remoteEntry: "http://localhost:3000/mfe-prompt/remoteEntry.js",
  remoteName: "prompt_mfe",
  exposedModule: "./Prompt",
});

额外检查项 #

1. 确认MFE的DevServer配置正确，dist目录下的文件可通过http://localhost:3000/mfe-prompt/访问，比如直接访问http://localhost:3000/mfe-prompt/src_containers_Prompt_Prompt_tsx.bundle.js验证是否能正常返回文件。
2. 生产环境部署时，需将publicPath替换为对应环境的实际域名路径（如https://your-domain.com/mfe-prompt/）。

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