当前位置：首页 > news >正文

【Webpack】模块联邦

news 2025/9/13 14:58:33

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 的配置，可以让一个应用动态加载另一个应用的模块，而不需要重新打包。
优点是支持微前端、减少重复依赖、提升跨项目的代码复用能力。常见场景有微前端架构、跨团队共享组件库、老项目迁移等。