Webpack 模块联邦（Module Federation）

模块联邦（Module Federation）是 Webpack 5 推出的一个革命性功能，它让多个独立构建的项目可以共享代码或组件，甚至在运行时动态加载对方的模块。

传统问题：

在大型前端体系中，尤其是微前端架构场景：

各子应用需要复用组件（比如导航栏、登录模块等）
每个子应用独立部署、独立构建
想要共享组件，但不能打包到每个项目里（否则体积大、更新麻烦）

模块联邦的解决方案：

允许一个应用暴露出模块（exposes）
另一个应用在运行时去加载这个模块（remotes）
两边可以共享依赖（如 react、vue、lodash 等）
实现真正的跨应用模块复用

模块联邦依靠 Webpack 内置的运行时机制：

暴露端（Host / Remote）
- 使用 ModuleFederationPlugin 配置 exposes 把模块暴露出去；
消费端（Consumer）
- 使用 remotes 指定远程模块来源；
运行时动态加载
- 当消费端访问远程模块时，Webpack 会在运行时拉取远程 bundle 并注册模块；
共享依赖
- 通过 shared 声明两端共用依赖，避免重复加载。

配置示例

主应用（Host）

javascript 复制代码

// webpack.config.js
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    // 告诉主应用，从 http://localhost:3001/remoteEntry.js 加载 remoteApp 的模块
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true }
  }
});

远程应用（Remote）

javascript 复制代码

new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js', // 暴露清单文件
  exposes: {
    './Button': './src/components/Button' // 暴露组件
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
});

主应用中使用远程组件：

javascript 复制代码

import React from 'react';

// 动态加载远程模块
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

export default function App() {
  return (
    <React.Suspense fallback="Loading...">
      <RemoteButton />
    </React.Suspense>
  );
}

配置项：

名称	含义
`name`	应用名称，暴露或引用时的标识
`filename`	构建输出的入口文件，用于远程加载
`exposes`	当前应用暴露出的模块
`remotes`	当前应用依赖的远程模块
`shared`	公共依赖，防止重复加载版本冲突

使用场景：

微前端架构
- 多个独立子应用共享 UI 组件、工具库、公共逻辑。
团队协作开发
- 团队 A、B 各自维护独立项目，但需要共享部分模块。
动态加载独立功能模块
- 像插件系统，按需从服务器加载新模块。

常见问题:

版本冲突
- 使用 shared 的 singleton 和 requiredVersion 控制依赖版本。
远程模块加载失败
- 检查 remoteEntry.js 是否能被访问；
- 跨域时配置 CORS。
类型支持（TS项目）
- 可以通过 declare module 'remoteApp/Button' 声明类型。

对比微前端

对比项	模块联邦	微前端框架（如 qiankun）
目的	代码级模块共享	应用级独立运行
加载方式	Webpack 运行时加载	iframe / sandbox / 子路由等
适用场景	组件共享、跨项目复用	独立项目集成
构建关系	构建时/运行时共享	完全独立构建

实际项目中常常模块联邦 + 微前端一起使用。