webpack5联邦模块

什么是联邦模块

联邦模块说白了就是可以使一个应用动态使用另一个应用的模块。
比如，线上部署app1，app2。app1可以加载app2中一些模块。
其本质为一个 wepack app在运行时加载另一个webpack app的模块。

image.png

没有联邦模块前我们的解决方式:

• npm 包。（适用于比较通用的 组件库，函数库）
• monorepo项目管理 （适用于关联性较强的项目组为monorepo）
• script 动态标签，暴露全局变量（一般没有使用，会存在全局变量污染，主要适用于一些公共依赖）
• copy/past（不推荐）

我们发现上述的方式在有些情况还是很难实现不同app的代码复用如：app不在同一个monorepo，页面组件需要复用。如果基于npm或script实现页面组件复用又需要考虑公共依赖的处理（如：vue，react这些）

那么我们来看联邦模块是怎么优雅的解决这个问题呢？

项目实践

我们想创建两个项目：react项目，vue项目，react项目中使用vue项目的组件，通过new Component().$mount('selector') 来实现vue组件应用在react中。
总体项目结构：

image.png

配置模块暴露

该配置了暴露vueApp HelloWorld组件。

image.png

image.png

引用远端模块

在react-app项目中引用上一步中暴露的远端模块

image.png

image.png

network看下js加载。远端模块被加载，vue被单独加载一次。

image.png

加载过程

image.png

常见问题

Uncaught Error: Shared module is not available for eager consumption
//详见：https://webpack.js.org/concepts/module-federation/