模块联邦是Webpack 5实现微前端松耦合与独立部署的核心方案，通过exposes、remotes、shared配置使子应用动态共享模块、状态及上下文，运行时按需加载remoteEntry.js，无需构建时打包。
模块联邦（Module Federation）是 Webpack 5 引入的一项核心能力，它允许一个 JavaScript 应用在运行时动态加载并使用另一个独立构建应用暴露的模块，而无需重新打包或发布依赖。它不是微前端的唯一方案，但已成为实现松耦合、独立部署微前端的关键基础设施。
模块联邦如何让不同团队的应用“互相认识”？
每个微前端子应用通过 Webpack 配置中的 ModuleFederationPlugin 定义自己“提供什么”和“需要什么”：
- exposes：声明本应用愿意对外共享的模块（如 React 组件、工具函数、Context、甚至整个路由页面）
-
remotes：声明本应用要从其他远程应用加载哪些模块（例如：
remoteApp@http://app-b.com/remoteEntry.js） - shared：协调跨应用的依赖版本（如 React、React Router），避免重复加载或冲突，支持 singleton、eager 等策略
它怎么做到“运行时按需加载”，而不是构建时打包？
模块联邦不把远程模块打包进本地产物，而是生成一个轻量级的 remoteEntry.js 入口文件。当主应用执行 import("remoteApp/Component") 时：
- Webpack 运行时根据 remote 配置，自动发起请求加载对应远程应用的
remoteEntry.js - 该入口文件包含远程模块的元信息和工厂函数，主应用通过其提供的 API 动态获取模块实例
- 整个过程对开发者透明，写法与普通 import 几乎一致（仅需配合 dynamic import）
代码共享不只是组件，还能共享状态与运行时上下文
模块联邦支持导出任意 JS 值，因此可以安全共享：
立即学习“Java免费学习笔记（深入）”；
- 已初始化的 Redux store 或 Zustand store 实例（避免多份 store 冲突）
- 自定义 Hook（如
useAuth、useFeatureFlag） - 全局样式注入器、主题 Provider、i18n 实例
- 甚至共享第三方库的包装层（如统一封装的 axios 实例 + 拦截器）
关键在于：这些共享模块需在 shared 中正确配置，并确保生命周期与挂载时机可控（例如只在首次使用时初始化）。
它解决了微前端中哪些真实痛点？
相比传统 iframe 或手动 script 加载，模块联邦带来实质性改进：
- 无跨域通信复杂性：所有模块运行在同一个 JS 上下文，可直接调用、传参、监听事件
- 无样式隔离开销：CSS-in-JS 或 CSS Modules 可自然共存；若需隔离，仍可配合 Shadow DOM 或 scoped class 策略
- 真正独立部署：子应用更新后只需替换自己的
remoteEntry.js和资源文件，主应用无需重建 - 细粒度复用：不是整站嵌入，而是按需导入按钮、表单、图表等原子模块
不复杂但容易忽略：模块联邦本身不解决路由分发、应用激活、错误降级等问题——这些需上层框架（如 single-spa、qiankun）或自定义编排逻辑配合完成。
