模块联邦是Webpack 5为微前端设计的运行时代码共享机制，解决传统方案样式隔离难、通信复杂、状态不共享等问题，支持子应用独立构建部署并按需加载。
模块联邦（Module Federation）是 Webpack 5 引入的核心特性，专为微前端架构设计，允许不同构建产物在运行时动态共享代码、组件、函数甚至状态，无需重新打包或发布。
模块联邦解决什么问题
传统微前端（如 iframe、Web Components 或手动加载 script）存在样式隔离难、通信复杂、状态不共享、首屏加载慢等问题。模块联邦通过构建时声明依赖、运行时按需加载的方式，让子应用像本地模块一样被主应用 import，同时保持独立构建、部署和版本控制。
典型场景包括：
- 中后台系统中，将“用户管理”“订单中心”“报表看板”拆分为独立团队维护的子应用，主容器统一导航和登录态
- 同一业务线内多个 SPA 共享通用 UI 组件库、工具函数或 i18n 配置，避免重复打包
- 灰度发布时，把某个功能模块以新版本子应用形式接入，主应用无须发版即可切换
核心配置：Host 与 Remote 的角色分工
模块联邦中分 Host（容器/主应用）和 Remote（远程/子应用）两种角色，双方需配合配置才能生效。
立即学习“Java免费学习笔记（深入）”；
Remote 子应用（如 user-app）需暴露模块：
webpack.config.js
plugins: [
new ModuleFederationPlugin({
name: "userApp",
filename: "remoteEntry.js",
exposes: {
"./UserList": "./src/UserList.vue", // 可被外部 import 的路径别名
"./api": "./src/api/user.js"
}
})
]
Host 主应用（如 shell-app）需引入远程模块：
webpack.config.js
plugins: [
new ModuleFederationPlugin({
name: "shellApp",
remotes: {
userApp: "userApp@https://cdn.example.com/user-app/remoteEntry.js"
}
})
]
之后在主应用中可直接使用：
// 动态导入远程组件（推荐）
const UserList = await import("userApp/UserList");
// 或静态导入（Webpack 会自动处理异步加载）
import { api } from "userApp/api";
实际落地的关键细节
模块联邦不是开箱即用的银弹，需注意以下实践要点：
-
共享依赖必须对齐版本：React、Vue、Lodash 等基础库应通过
shared配置统一由 Host 提供，避免多版本冲突。例如 Host 中配置shared: { react: { singleton: true, requiredVersion: "^18.2.0" } }，Remote 则需设为requiredVersion: false或同版本 -
运行时 URL 必须可访问：Remote 的
remoteEntry.js地址需支持跨域（CORS），建议使用 CDN 或反向代理，避免本地开发时因协议/端口不同导致加载失败 -
类型提示需手动补全：TypeScript 项目中，Remote 暴露的模块默认无类型定义。可在 Host 中新建
types/userApp.d.ts声明模块，或由 Remote 发布配套@types/user-app包 -
热更新支持有限：Webpack Dev Server 对 Module Federation 的 HMR 支持较弱，开发时建议启用
devServer.federatedDevServer（Webpack 5.70+）或采用单独启动 + 接口代理方式调试
与其它微前端方案对比
相比 single-spa（需手动生命周期管理）、qiankun（基于沙箱 + HTML Entry）等方案，模块联邦优势在于：
- 天然支持现代构建工具链（Webpack/Vite 插件生态成熟）
- 细粒度共享：不只是整个应用，而是任意导出的函数、Hook、组件甚至 CSS Module
- 构建时优化：Webpack 能分析跨应用依赖图，做 Code Splitting 和 Tree Shaking
但也有局限：强绑定 Webpack 生态；不兼容 IE；对 SSR 支持需额外封装（如 Next.js 的 next-module-federation）；调试错误堆栈可能跨应用变长。
