模块联邦通过配置expose、remotes和shared实现跨应用模块共享。Remote应用暴露模块，Host应用动态导入并加载远程模块，同时共享依赖避免重复引入，运行时动态解析与加载，支持微前端独立构建与集成。
Webpack 5 的模块联邦（Module Federation）通过在构建时和运行时动态共享 JavaScript 模块，实现跨应用的代码复用。它允许一个应用（Host）在运行时从另一个应用（Remote）加载并执行模块，而无需将这些模块打包进本地 bundle。
1. 配置 Remote 应用暴露模块
在远程应用（提供方）的 Webpack 配置中，使用 red">ModuleFederationPlugin 暴露需要共享的模块：
- name：定义远程应用的唯一标识名，用于其他应用引用。
- exposes：声明要对外暴露的模块路径，例如组件或工具函数。
示例配置：
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
'./utils': './src/utils/common'
},
shared: { ...deps, react: { singleton: true }, 'react-dom': { singleton: true } }
})
2. Host 应用动态导入远程模块
主应用（消费方）在配置中引入远程应用，并通过 import 动态加载其暴露的模块：
立即学习“Java免费学习笔记（深入）”；
示例配置：
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@https://remote-domain.com/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
使用方式：
const Button = await import('remoteApp/Button');
3. 共享依赖避免重复加载
通过 shared 配置项，多个应用可共用同一版本的第三方库（如 React、Lodash），提升性能：
- 设置 singleton: true 确保全局只存在一个实例，防止冲突。
- Webpack 在运行时协商依赖版本，优先使用已加载的版本。
4. 运行时动态解析与加载流程
当 Host 应用请求远程模块时，执行过程如下：
- Host 加载 remoteEntry.js，获取远程模块的入口信息。
- Webpack 的容器机制解析模块路径，建立模块注册表。
- 调用 import() 时，按需下载对应 chunk 并执行，返回模块实例。
基本上就这些。模块联邦让微前端架构中的应用真正实现运行时集成，既独立构建又可共享逻辑，关键是配置好 expose、remotes 和 shared 三部分。不复杂但容易忽略细节，比如版本对齐和 singleton 设置。
