Webpack模块联邦远程模块Chunk加载路径错误，如何配置指定路径？

问题场景 #

容器应用使用Webpack Module Federation Plugin的配置如下：

new ModuleFederationPlugin({
  name: 'container',
  filename: 'remoteEntry.js',
  remotes: {
    huddle: 'microfrontend@{domain}/AdditionalDir/remoteEntry.js'
  },
})

两个前端部署在Kubernetes集群的Nginx Pod中，请求通过Nginx代理处理。目前remoteEntry.js可正常加载，但远程模块的Chunk文件加载路径为{domain}/hash.js，期望路径为{domain}/AdditionalDir/hash.js，调整容器应用的publicPath未解决问题。

解决方案 #

1. 配置远程应用的publicPath #

远程模块的Chunk加载路径由远程应用（huddle）的Webpack配置决定，而非容器应用。你需要在远程应用的Webpack配置中设置正确的publicPath：

• 静态配置方式：在远程应用的webpack.config.js的output中指定：

module.exports = {
  output: {
    // ...其他配置
    publicPath: '/AdditionalDir/'
  },
  // ...ModuleFederationPlugin配置
}

• 动态配置方式（适合部署路径不固定的场景）：在远程应用的入口文件最顶部添加以下代码，动态设置publicPath：

// 远程应用入口文件（如src/index.js）
__webpack_public_path__ = `${window.location.origin}/AdditionalDir/`;

2. 确认远程应用的ModuleFederation配置 #

确保远程应用的ModuleFederationPlugin配置中，name与容器remotes中指定的名称一致，且打包后的Chunk文件输出到AdditionalDir对应的目录下：

// 远程应用的ModuleFederation配置
new ModuleFederationPlugin({
  name: 'microfrontend', // 需和容器remotes中的名称匹配
  filename: 'remoteEntry.js',
  exposes: {
    // ...暴露的模块列表
  }
})

3. 验证Nginx代理规则 #

确认Nginx的代理配置中，对/AdditionalDir/路径下的所有静态资源（包括Chunk文件）有正确的路由规则，确保请求能转发到远程应用的Pod中。

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