模块联邦是Webpack 5实现微前端的核心技术，允许应用在运行时动态共享组件与依赖，通过remotes和exposes配置实现跨应用加载，支持独立开发部署，需注意版本一致、加载容错与样式隔离，适用于多团队协作的大型项目。
模块联邦（Module Federation）是 Webpack 5 引入的一项强大功能，它让多个独立的 JavaScript 应用在运行时共享代码成为可能。这项技术直接推动了微前端架构的发展，使得不同团队开发的应用可以像拼积木一样组合在一起，而无需构建时的强耦合。
什么是模块联邦？
模块联邦允许一个应用暴露部分模块，供其他应用在运行时动态加载。这意味着你可以把一个微前端应用当作“库”来使用，但不是通过 npm 发布，而是直接从远程 URL 加载。
核心优势包括：
配置主要在 Webpack 中完成，通过 ModuleFederationPlugin 插件实现：
立即学习“Java免费学习笔记（深入）”；
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@https://remote-domain.com/remoteEntry.js'
},
exposes: {
'./Button': './src/components/Button',
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
})
模块联邦如何支撑微前端？
微前端的目标是将大型前端项目拆分为多个小型、自治的应用。模块联邦为这种架构提供了原生级别的集成能力。
典型场景如下：
- 主应用（Shell）作为容器，负责布局和导航
- 子应用（如订单、用户中心）由不同团队维护，独立部署
- 主应用通过 remotes 配置加载子应用的入口文件，在页面中渲染对应组件
例如，主应用中可以直接导入远程的页面组件：
const OrderList = await import('remoteApp/OrderPage');
// 然后像普通组件一样使用
实际应用中的关键点
虽然模块联邦很强大，但在落地时需要注意几个关键问题：
- 版本兼容性：shared 模块建议设置 singleton，确保 React、Vue 等框架只加载一个实例，避免冲突
- 加载时机与错误处理：远程模块可能加载失败或延迟，需做好 loading 和 fallback 处理
- 样式隔离：不同应用的 CSS 可能互相影响，推荐使用 CSS Modules 或 Shadow DOM
- 构建产物命名规范：remoteEntry.js 必须可访问，CDN 路径、版本管理要统一规划
适用场景与局限
模块联邦适合中大型组织，多个团队协作维护复杂系统。如果项目规模小或团队集中，引入反而增加复杂度。
当前局限包括：
- 依赖 Webpack 5，Vite、Rollup 等需要插件支持
- 调试时可能遇到跨域问题，需配置 devServer proxy
- 不适用于 SSR 场景，服务端无法动态加载远程模块
基本上就这些。模块联邦降低了微前端的技术门槛，让“前端微服务”真正变得可行。关键是合理划分边界，保持应用间的松耦合，才能发挥最大价值。
