Webpack5模块联邦生产环境动态加载远程模块报ChunkLoadError求助

本地开发环境下Webpack DevServer会自动修正异步chunk的加载路径，因此远程模块的动态加载逻辑可以正常运行；生产构建后路径解析规则失效，加载远程模块的异步chunk时会拼接错误的资源地址，最终返回404触发报错。

• 触发问题的核心配置项：消费端Webpack配置中output.publicPath硬编码为/，导致所有异步chunk（包括远程模块内部拆分的chunk）都会从消费端自身域名的根路径下请求资源，完全不会匹配远程模块的静态资源部署路径。
• 本地开发无问题的原因：DevServer环境下Webpack会自动为远程chunk匹配本地代理路径，因此不会触发加载失败。

1. 调整远程模块的公共路径配置 #

在dMove远程模块的生产构建配置中，将output.publicPath设置为远程模块静态资源部署的绝对根路径，不要使用相对路径。模块联邦运行时会基于该配置生成正确的内部chunk加载映射。

// 远程模块webpack.prod.config.js的output配置示例
output: {
  // 保留原有配置
  publicPath: "<远程模块静态资源部署的绝对根路径>",
}

2. 修正消费端的公共路径与联邦模块配置 #

• 将消费端原配置中硬编码的publicPath: '/'修改为*publicPath: 'auto'*，取消对所有chunk加载路径的强制覆盖，让Webpack基于当前入口文件的位置自动匹配公共路径。
• 保持ModuleFederationPlugin中remotes配置的远程入口地址为绝对路径，和实际部署的远程模块地址一致。

// 消费端output配置修正示例
output: {
  filename: 'static/js/bundle.js',
  chunkFilename: 'static/js/[name].[contenthash].chunk.js',
  publicPath: 'auto', // 替换原来的"/"
  path: paths.appBuild,
}

3. 增加chunk加载异常兜底 #

补充全局chunk加载失败的捕获与重试逻辑，避免网络波动、静态资源缓存等偶发问题导致未捕获的Promise异常阻塞页面：

// 在消费端入口文件最顶部增加
window.addEventListener('error', (event) => {
  const target = event.target;
  // 拦截JS chunk资源加载失败的异常
  if (target.tagName === 'SCRIPT' && target.src.includes('.chunk.js')) {
    const retryScript = document.createElement('script');
    retryScript.src = target.src;
    document.body.appendChild(retryScript);
  }
}, true)

• 重新构建并部署远程模块，打开远程入口文件remoteEntry.js，确认文件内映射的所有chunk资源地址为绝对路径，无相对路径形式的地址。
• 重新构建消费端应用，部署后打开浏览器网络面板，触发远程模块的懒加载逻辑，确认所有来自远程模块的chunk资源请求都指向远程模块的部署域名，而非消费端自身域名。
• 确认懒加载模块可以正常渲染，控制台不再出现ChunkLoadError报错。

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