【Webpack】模块联邦

1. 什么是模块联邦?

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

换句话说:

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

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


2. 核心机制

  • Host(宿主应用):需要远程加载模块的应用。
  • Remote(远程应用):提供模块给别人用的应用。

在 Webpack 配置里,使用 ModuleFederationPlugin

js 复制代码
// 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 应用的组件:

js 复制代码
import Button from "remoteApp/Button";

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


3. 模块联邦的优势

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

4. 应用场景

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

5. 总结

模块联邦是 Webpack 5 新增的一个特性,它允许多个独立构建和部署的应用在运行时共享模块。

它的核心是 ModuleFederationPlugin,通过 Host 和 Remote 的配置,可以让一个应用动态加载另一个应用的模块,而不需要重新打包。

优点是支持微前端、减少重复依赖、提升跨项目的代码复用能力。常见场景有微前端架构、跨团队共享组件库、老项目迁移等。

相关推荐
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf17 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊17 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel17 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_4462608517 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室18 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart18 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级18 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang19 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang19 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构