初识 webpack5 联邦模块

首先来先看眼webpack官方对联邦模块的定义

Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.This is often known as Micro-Frontends, but is not limited to that.

很显然，webpack 也是为了微前端的大方向，开发了这个功能。所以我们结合为前端来说联邦模块功能。

联邦模块不局限于严格的主子关系，每个子应用都可以成为host, 每个子应用也都可以成为remote

PS. host: 引用了其他应用的应用, remote：被其他应用所使用的应用

**

那我我们来结合代码简单的说一下联邦模块的使用

**

首先我们在一个子应用中正常的引用一个头部组件

然后利用联邦模块的功能，在webpack config中把这个组件暴露出去，让其应用也可以引用这个组件

在另一个应用中，设置如何引用暴露出来的组件

最后，我们注册好了引用的组件，就把它当作正常的组件来使用啦

这个是页面上运行的效果

那联邦模块功能是怎么实现的呢

我们看一下app2 中的main.js 是如何引入app1 的。

导出了一个异步函数，去请求了我们配置的app1 的入口文件，获取到remoteEntry.js 返回参数

接下来看一下app1/remoteEntry.js

moduleMap：通过exposes生成的模块集合 get: host通过该函数，可以拿到remote中的组件

init：host通过该函数将依赖注入remote中

src_components_Header_vue.js 此为Header 组件的一个webpack chunk 包文件，可运行在浏览器中

通过上述我们可以简单总结，跨项目代码共享，要求需要共享的项目代码根据配置文件的导出模块，进行单独打包，生成对应的modules,然后通过一个全局变量建立起两个不同项目之间的连接。

下面是webpack包源码的基本结构

另外，EMP微前端架构也是基于webpack5 来实现的，对比现在流行的QIANKUN框架，实现了去中心化的功能，使应用间的通信更加方便，并且能实现目前QIANKUN还不具备的SSR功能，感兴趣的同学可以研究一下。