基于 Webpack 5 Module Federation 实现跨应用模块共享与微前端实践。

方案简介

本方案来自 webpack-china/awesome-webpack-cn 收录的 Webpack 5 主题文章：使用 ModuleFederationPlugin 在 Vue 项目中体验模块联合（Module Federation）。模块联合是 Webpack 5 引入的重要能力，允许一个 JavaScript 应用在运行时动态加载另一个独立构建的应用导出的模块，从而实现多个团队、多个应用之间的代码共享与协作，是构建微前端架构的官方推荐路径之一。

该方案适合维护多个 Vue 应用、希望在应用间共享组件或公共逻辑、又不想通过 npm 包发布流程同步代码的团队。仓库同时收录了《Webpack 5 之 模块联合（Module Federation）》作为概念补充，帮助读者系统理解该机制。

亮点与能力

• 运行时动态加载其他应用导出的模块
• 多个独立构建的应用可共享代码
• 由 Webpack 5 原生插件支持，无需额外工具
• 可直接在既有 Vue 项目中落地尝试

组成与分工

• Webpack 5：构建工具本体，模块联合能力由其内置插件提供，无需额外打包器。
• ModuleFederationPlugin：Webpack 5 核心插件，负责声明当前应用暴露（expose）的模块与依赖的远程模块，并在运行时完成加载。
• Vue：宿主应用框架，文章以 Vue 项目为载体验证模块联合的初体验。
• Module Federation（模块联合）：整套机制的设计思想，即多个独立构建的应用组成一个联合体，按需共享模块。

实施步骤

1. 准备 Vue 项目

准备一个基于 Vue 的项目作为体验载体，构建工具切换为 Webpack 5。

2. 配置 ModuleFederationPlugin

在 Webpack 配置中引入 ModuleFederationPlugin，声明本应用暴露给外部的模块（expose）以及需要消费的远程模块（remotes），实现跨应用引用。

3. 构建并运行体验

完成上述配置后按原文《webpack 5 ModuleFederationPlugin vue 项目初体验》进行初体验验证，观察模块在应用间的共享效果；概念细节可同步阅读《Webpack 5 之 模块联合（Module Federation）》。

注意事项与常见问题

• 原文定位为「初体验」，说明该能力在当时 Vue 生态中尚属新事物，生产落地需谨慎评估
• 模块联合要求各参与应用构建工具与版本协同，老版本项目需先完成升级
• 与 ESM 原生方案的取舍可参考仓库收录的《ESM vs Webpack 面向高性能构建的探索》

优缺点

• ✓ 跨应用共享模块
• ✓ Webpack 5 原生支持
• ✕ 生态较新，实践经验少

出处

本方案挖掘自开源项目 webpack-china/awesome-webpack-cn，方案内容与实施命令均来自其 README 原文。