webpack5联邦模块
2021-07-21 本文已影响0人
前端大魔王
什么是联邦模块
联邦模块说白了就是可以使一个应用动态使用另一个应用的模块。
比如，线上部署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/
