Webpack 5 Module Federation 模块共享最佳实践

🌐 Webpack 5 Module Federation 模块共享最佳实践

🧬 模块共享是微前端架构中最难啃的一块骨头。Webpack 5 引入的 Module Federation，为模块跨项目共享带来了原生支持。本文将手把手带你走通「多个独立项目之间共享组件 / 工具库」的完整实践路径。

---

🎯 什么是 Module Federation？

Module Federation 是 Webpack 5 新增的一项特性，允许多个独立构建的应用之间共享代码（模块），实现“在运行时加载远程模块”。

它解决了什么问题？

传统方式	问题
NPM 包共享	每次改动都要重新构建 + 发包
CDN 引入	缺乏依赖管理与模块边界
iframe 嵌套	用户体验差，通信复杂

Module Federation 是“运行时模块共享的终极解决方案”。

---

🧱 应用场景有哪些？

• 微前端架构中的子应用共享公共组件库
• 多系统间共用一个业务组件（如表单引擎）
• 将设计系统作为远程模块在多个项目中使用
• 在不升级主项目的情况下动态接入新模块

---

⚙️ 基本原理图示

[App A]                            [App B]
webpack.config.js                 webpack.config.jsexposes: {                       remotes: {'./Header': './Header.js'        'AppA': 'AppA@http://localhost:3001/remoteEntry.js'}                                }

App A 暴露模块（expose），App B 远程加载模块（remote），两者通过 runtime 交互。

---

🛠 实战：两项目共享组件

🎬 准备两个项目

my-project/
├── host-app/     # 主应用
├── remote-app/   # 被共享模块的远程应用

使用 Vite/CRA/Vue CLI 也可，但推荐用 Webpack 搭配更方便。

---

📦 remote-app 配置（暴露模块）

// remote-app/webpack.config.js
new ModuleFederationPlugin({name<