模块联邦（Module Federation）是 Webpack 5 引入的核心功能，旨在实现多个独立构建的前端应用在运行时动态共享代码、依赖或组件，支持微前端架构和跨项目模块复用。

‌模块联邦的核心概念‌

模块联邦通过去中心化的设计，允许不同应用在运行时直接共享模块，无需重复打包或依赖 NPM 安装。其核心特点包括：

  1. ‌独立构建与部署‌：每个应用（容器或远程）可单独开发、部署，通过暴露（exposes）和引用（remotes）机制实现模块共享。‌‌‌‌

  2. 运行时动态加载‌：模块按需异步加载，减少初始包体积，提升性能。‌‌

  3. ‌依赖共享‌：通过 shared 配置（如React、ReactDOM）避免重复加载，确保单例模式。‌‌‌‌

‌典型应用场景‌

  1. ‌微前端架构‌：将多个子应用集成到宿主容器中，实现技术栈解耦和独立部署。‌‌

  2. ‌跨项目组件复用‌：通用组件（如按钮、表单）可被多个项目动态引用，减少重复开发。‌‌

  3. 依赖优化‌：共享第三方库（如 Lodash ）以降低整体打包体积。‌‌

实现步骤与配置

  1. 使用 ModuleFederationPlugin 声明远程模块入口（remotes）和共享依赖（shared）。‌‌
1
2
3
4
5
6
7
8
9
10
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: { app1: 'app1@http://example.com/remoteEntry.js' },
      shared: { react: { singleton: true } }
    })
  ]
};
  1. 远程应用配置通过 exposes 暴露模块，并配置共享依赖
1
2
3
4
5
6
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: { './Button': './src/Button' },
  shared: { react: { singleton: true } }
});