模块联邦通过运行时动态加载实现微前端代码共享，核心是Webpack 5的ModuleFederationPlugin。1. 远程应用暴露模块并生成remoteEntry.js；2. 宿主应用配置remotes引入远程模块；3. shared确保依赖版本一致且避免重复加载；4. 运行时按需加载远程chunk，实现解耦集成。
模块联邦（Module Federation）是 Webpack 5 引入的一项功能，它允许在运行时动态加载来自不同构建的 JavaScript 模块，实现微前端架构中多个独立应用之间的代码共享。它的核心在于让一个应用（Host）可以消费另一个应用（Remote）暴露的模块，而无需在构建时将它们打包在一起。
1. 基本原理：运行时模块共享
模块联邦不依赖传统的 npm 包或构建时打包合并，而是通过在运行时从远程应用加载模块来实现共享。每个参与的应用都使用 Webpack 构建，并配置 Module Federation 插件，明确自己是“宿主”还是“远程”角色。
其关键机制包括：
-
远程模块注册：远程应用在启动时会将其暴露的模块注册到全局的
__webpack_require__.federation中。 - 异步加载入口：宿主应用通过远程应用提供的入口 URL（如 remoteEntry.js）获取模块清单和加载器。
- 按需加载模块：当宿主请求某个远程模块时，Webpack 的运行时会动态发起网络请求加载对应的 chunk。
2. 核心配置：ModuleFederationPlugin
实现模块联邦的关键是 Webpack 的 ModuleFederationPlugin。以下是常见配置项说明：
立即学习“Java免费学习笔记（深入）”；
作为远程应用（提供模块）：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
new ModuleFederationPlugin({
name: 'remoteApp', // 远程应用唯一标识
filename: 'remoteEntry.js', // 输出的入口文件名
exposes: {
'./Button': './src/components/Button', // 暴露本地模块
'./utils': './src/utils'
},
shared: ['react', 'react-dom'] // 自动处理依赖共享
})作为宿主应用（消费模块）：
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@https://remote-domain.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})配置后，宿主应用就可以像导入本地模块一样使用远程模块：
```js import Button from 'remoteApp/Button'; function App() { return ; } ```3. 共享依赖（Shared Dependencies）
多个应用可能都使用了相同的库（如 React、Lodash）。模块联邦通过 shared 配置避免重复加载。
Webpack 会根据版本和 singleton 设置决定如何处理共享依赖：
- 若版本兼容，复用已加载的实例。
- 若设置
singleton: true，确保全局只有一个实例（常用于 React 等状态敏感库）。 - 支持自动版本协商，避免冲突。
4. 实现流程简述
当宿主应用启动并尝试加载远程模块时，大致流程如下：
- 宿主解析
remotes配置，向远程地址请求remoteEntry.js。 - 该文件包含远程模块的 manifest 和加载逻辑。
- Webpack 运行时将远程模块映射到指定命名空间。
- 调用
import('remoteApp/Button')时，触发异步 chunk 加载。 - 模块返回后，正常执行并渲染。
基本上就这些。模块联邦的核心是解耦构建过程，实现真正的运行时集成，特别适合大型团队协作和微前端落地。只要配置好 remoteEntry 和模块映射，跨应用引用就像写本地路径一样自然。不复杂但容易忽略细节，比如版本对齐和运行时环境一致性。
