为Webpack模块联邦组件的远程模块URL添加哈希值

问题背景 #

主应用通过Module Federation加载远程组件，远程组件配置了带contenthash的输出文件名：

// 远程应用webpack配置
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteComponent1', 
      fileName: 'remote.[contenthash].js', // 构建生成带哈希的唯一文件
      exposes: {}
    }),
  ],
};

但主应用无法在webpack配置中硬编码动态变化的哈希值，导致尝试的配置无效：

// 无效的主应用配置尝试
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      remotes: {
        remoteComponent1:`remoteComponent1@https://localhost:3000/remote.${[contenthash]}.js`,
      },
      shared: {},
    }),
  ],
};

解决方法 #

1. 动态加载远程容器（推荐） #

放弃在webpack配置中硬编码远程地址，改为运行时通过manifest文件获取哈希文件名并加载：

• 远程应用构建后默认会生成asset-manifest.json，包含所有构建文件的路径映射：

  {
    "files": {
      "remote.js": "/remote.abc123def.js"
    }
  }
  

• 主应用先请求该manifest文件，解析出真实的远程文件路径，再动态加载容器：

  // 主应用入口文件或组件中
  async function initRemoteComponent() {
    // 拉取远程应用的manifest
    const manifestRes = await fetch('https://localhost:3000/asset-manifest.json');
    const manifest = await manifestRes.json();
    // 获取带哈希的远程文件地址
    const remoteUrl = `https://localhost:3000${manifest.files['remote.js']}`;
  
    // 加载远程容器
    await import(/* webpackIgnore: true */ remoteUrl);
    // 初始化并获取远程组件
    const { default: RemoteComponent } = await import('remoteComponent1/ExposedComponent');
    
    // 渲染组件（示例：React场景）
    ReactDOM.render(<RemoteComponent />, document.getElementById('remote-container'));
  }
  
  initRemoteComponent();
  

• 主应用webpack配置无需在remotes中配置该组件，或仅保留占位符即可。

2. CI/CD流程注入哈希值 #

如果是版本化发布场景，可在CI/CD流程中自动提取远程组件的哈希值，注入到主应用的构建环境变量：

• 远程应用构建后，从asset-manifest.json中读取哈希值，写入环境变量或配置文件。
• 主应用webpack配置中读取该变量拼接地址：

  // 主应用webpack配置
  module.exports = {
    plugins: [
      new ModuleFederationPlugin({
        name: 'app',
        remotes: {
          remoteComponent1: `remoteComponent1@https://localhost:3000/remote.${process.env.REMOTE_COMPONENT1_HASH}.js`,
        },
        shared: {},
      }),
    ],
  };
  

这种方式适合需要提前构建主应用，且远程组件版本可控的场景。

3. 手动创建脚本标签加载远程文件 #

主应用可以不预先配置remotes，通过手动创建脚本标签加载远程文件，再初始化共享范围：

// 主应用中
async function loadRemote() {
  // 初始化共享范围
  await __webpack_init_sharing__('default');
  const container = window.remoteComponent1; // 远程脚本加载后会挂载到window
  await container.init(__webpack_share_scopes__.default);
  
  const module = await container.get('./ExposedComponent');
  const Component = module.default;
  // 渲染组件
}

// 动态创建脚本标签（可先从manifest获取哈希地址）
const script = document.createElement('script');
script.src = 'https://localhost:3000/remote.abc123def.js';
script.onload = loadRemote;
document.head.appendChild(script);

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