开发环境下容器应用加载远程应用报ScriptExternalLoadError错误如何解决？

问题根因 #

• 你配置的runtimeChunk: 'single'会将webpack运行时代码统一抽离为单一份，这会破坏模块联邦（Module Federation）的remoteEntry.js自带的运行时初始化逻辑，导致远程模块的上下文被篡改无法加载
• 按node_modules单包拆分vendor的规则，会将模块联邦依赖的核心运行时代码拆分到独立chunk中，remoteEntry.js加载时不会自动引入这些拆分后的依赖，直接触发加载失败

可行修复方案 #

无需完全注释optimization配置，可通过调整规则兼容代码拆分需求和模块联邦逻辑：

1. 移除全局runtimeChunk: 'single'配置，如果必须抽离公共运行时，改为按入口生成独立runtime：

runtimeChunk: {
  name: entrypoint => `runtime~${entrypoint.name}`
}

2. 调整splitChunks的vendor规则，排除模块联邦相关依赖不做拆分：

optimization:{
  runtimeChunk: {
    name: entrypoint => `runtime~${entrypoint.name}`
  },
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        exclude: /[\\/]node_modules[\\/](webpack|@module-federation)[\\/]/,
        name: module => (module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/) || [])[1]
      }
    }
  }
}

3. 开发环境下补充跨域配置，避免跨域拦截导致remoteEntry.js加载失败：

devServer: {
  port: 3005,
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
}

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