模块联邦是Webpack 5实现运行时代码共享的核心方案，支持远程模块按需加载、依赖版本统一及热更新，但需注意React版本一致、样式隔离、路由协调与错误边界处理。
模块联邦（Module Federation）是 Webpack 5 引入的一项核心能力，它允许不同构建产物在运行时动态共享代码（比如 React 组件、工具函数、状态管理模块等），而无需重新打包或发布。它不是微前端的唯一方案，但已成为实现“运行时集成”型微前端最主流、最原生的方式之一。
模块联邦如何解决微前端的关键问题？
传统微前端（如 iframe、single-spa）常面临样式隔离难、状态不共享、通信繁琐、首屏加载慢等问题。模块联邦不替代路由或生命周期管理，而是专注解决代码级协同：让多个独立应用能像调用本地模块一样，直接 import 远程模块。
- 远程应用暴露组件或 Hook，主应用按需加载并渲染，无须构建时合并代码
- 共享依赖（如 React、lodash）可统一版本，避免重复加载和冲突
- 支持热更新远程模块（配合容器应用刷新机制），实现局部迭代
核心配置：Host 与 Remote 的角色分工
模块联邦中分 Host（容器/壳应用）和 Remote（子应用）。两者通过 Webpack 配置声明能力：
-
Remote 端：在
webpack.config.js中使用ModuleFederationPlugin的exposes字段导出模块，例如：
exposes: { './Button': './src/components/Button' } -
Host 端：在相同插件中用
remotes声明远程地址（支持 Promise 动态加载），例如：
remotes: { 'remoteApp': 'remoteApp@https://cdn.example.com/remoteEntry.js' } - Host 可直接写
import Button from 'remoteApp/Button'—— Webpack 在构建时不做解析，运行时才拉取并执行 remoteEntry.js
实际落地要注意什么？
模块联邦很强大，但容易踩坑：
立即学习“Java免费学习笔记（深入）”；
-
React 版本必须一致：若 Host 和 Remote 各用不同 React，会触发 “Invalid hook call” 错误；需通过
shared显式指定单例（requiredVersion: '^18.2.0'） - 样式需额外处理：CSS 不会自动隔离，推荐用 CSS-in-JS（如 styled-components）、CSS Modules，或约定 BEM + 命名空间
- 路由仍需协调：模块联邦不管 URL 跳转，需结合 react-router 或 single-spa 管理导航和生命周期
-
错误边界要加：远程模块加载失败或报错不能让整个页面崩溃，Host 应包裹
Suspense和自定义 ErrorBoundary
基本上就这些。模块联邦不是银弹，但它把“跨团队协作”的耦合点从构建时移到了运行时，让微前端真正具备了松耦合、渐进演进的能力。
