【Webpack】模块联邦

1. 什么是模块联邦？

模块联邦（Module Federation）是 Webpack 5 引入的一种机制，它允许多个独立构建和部署的应用之间，动态共享和加载代码。

换句话说：

• 以前不同项目的代码需要打包在一起（或者通过 npm 包共享）；
• 有了模块联邦，A 应用可以直接在运行时加载 B 应用的模块，而不需要重新打包部署。

👉 这为 微前端架构 提供了更灵活的技术实现。

2. 核心机制

• Host（宿主应用）：需要远程加载模块的应用。
• Remote（远程应用）：提供模块给别人用的应用。

在 Webpack 配置里，使用 ModuleFederationPlugin：

// A 应用（Host）
new ModuleFederationPlugin({
  name: "hostApp",
  remotes: {
    remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js",
  },
})

// B 应用（Remote）
new ModuleFederationPlugin({
  name: "remoteApp",
  filename: "remoteEntry.js",
  exposes: {
    "./Button": "./src/components/Button",  // 对外暴露组件
  },
})

之后，A 应用可以这样使用 B 应用的组件：

import Button from "remoteApp/Button";

Webpack 会在运行时从 http://localhost:3001/remoteEntry.js 拉取模块。

3. 模块联邦的优势

• 真正的运行时共享：不同应用之间无需重新打包，就能使用对方的模块。
• 版本兼容：能在一定程度上解决依赖版本不一致问题（共享依赖机制）。
• 支持微前端：多个团队开发的应用可以独立部署，又能组合成一个完整应用。
• 减少重复打包：比如 React、Vue 等公共库，可以配置成共享，避免多次加载。

4. 应用场景

• 微前端架构：一个大项目拆成多个子应用，按需加载。
• 跨团队组件共享：多个项目共用一套组件库，而不用发 npm 包。
• 渐进迁移：老系统和新系统逐步融合，先联邦引入，再逐步替换。

5. 总结

模块联邦是 Webpack 5 新增的一个特性，它允许多个独立构建和部署的应用在运行时共享模块。
它的核心是 ModuleFederationPlugin，通过 Host 和 Remote 的配置，可以让一个应用动态加载另一个应用的模块，而不需要重新打包。
优点是支持微前端、减少重复依赖、提升跨项目的代码复用能力。常见场景有微前端架构、跨团队共享组件库、老项目迁移等。