模块联邦是Webpack 5实现微前端的核心技术，通过exposes和remotes配置在运行时动态共享组件与依赖，支持跨应用按需加载、代码复用和独立部署，适用于大型系统集成、技术栈共存与团队自治场景。
微前端架构中，JavaScript 模块联邦（Module Federation）是 Webpack 5 引入的一项核心技术，它让不同前端应用在运行时动态共享代码成为可能。不同于传统的构建时依赖打包方式，模块联邦允许一个应用在不重新构建的情况下，直接加载另一个应用暴露的组件、函数或状态管理模块。这种方式特别适合大型组织中多个团队独立开发、部署子应用的场景。
什么是模块联邦？
模块联邦通过在 Webpack 配置中定义 exposes 和 remotes，实现跨应用的模块共享：
- exposes：指定当前应用对外暴露的模块路径，比如某个 React 组件或工具函数。
- remotes：声明要从其他应用加载的远程模块，运行时动态获取。
- 所有通信基于标准 ES Module，无需额外中间层。
例如，主应用配置 remotes 指向用户中心应用的 remoteEntry.js，就可以直接 import '@user-center/profile' 来使用其组件，就像引用本地模块一样。
如何配置模块联邦？
在 Webpack 5 的配置文件中使用 ModuleFederationPlugin：
立即学习“Java免费学习笔记（深入）”；
果酱小店开源电商系统源码
下载
果酱小店开源电商系统源码是一个模块化的 B2C 社交电商系统，基于当下最热门的开源技术进行构建，后端基于 PHP 框架 Laravel，前端基于微信小程序，vue.js，实现完全的前后端分离。
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
userCenter: 'userCenter@http://localhost:3001/remoteEntry.js',
order: 'order@http://localhost:3002/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
子应用（远程）配置：
new ModuleFederationPlugin({
name: 'userCenter',
filename: 'remoteEntry.js',
exposes: {
'./Profile': './src/components/Profile'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
配置完成后，主应用可通过 import('userCenter/Profile') 动态加载远程组件，并渲染到指定位置。
实际应用场景与优势
模块联邦适用于以下典型场景：
- 企业级平台整合多个业务系统，如电商中的商品、订单、客服各自独立开发部署。
- 老系统迁移过程中，新旧技术栈并存，通过联邦逐步替换模块。
- 团队自治：每个团队维护自己的应用，发布节奏互不影响。
相比 iframe 或手动集成 bundle，模块联邦的优势在于：
- 真正的代码复用，避免重复打包第三方库。
- 支持热更新和调试，开发体验接近单体应用。
- 按需加载远程模块，提升性能。
需要注意的问题
尽管模块联邦强大，但也有一些实践中的挑战：
- 版本兼容性：shared 模块必须确保运行时版本一致，尤其是 React 等对实例唯一性敏感的库。
- 构建环境隔离：各子应用最好使用相同构建工具版本，减少 loader 或语法解析差异。
- 错误隔离：一个子应用崩溃可能影响整体，建议结合错误边界和降级策略。
- 调试复杂度上升：需要熟悉多 entry、异步加载的调用链路。
