webpack模块联邦

Posted 2022-03-28 coderlin_

模块联邦

weback的模块联邦原理和import（）相似，也是promise的原理。，通过webpackjsonp加载异步代码，只不过，获取异步代码变成发请求去其他项目获取代码而已。

动机

• 模块联邦得动机是为了不同开发小组间开发一个或者多个应用。
• 应用将被划分为更小的应用快，一个应用快，可以是比如头部导航或者侧边栏得前端组件。也可以是数据获取逻辑得逻辑组件
• 每隔应用块由不同得组开发
• 应用或应用块共享其他应用块或库。

过程

• 每个应用亏块都是一个独立得构建，这些构建都将编译成容器。
• 容器可以被其他应用或者其他容器应用。
• 一个被引用得容器或称为remote，引用者被称为host，remote暴露模块给host，host则可以使用这些暴露得模块，这些模块被称为remote模块。
  
• 就是将一些东西共享给别人使用，联邦联邦，顾名思义就是由多个模块组成。

使用

借助

//模块联邦插件
import ModuleFederationPlugin from 'webpack/lib/container/ModuleFederationPlugin';

webpack内置的插件，然后配置

  new ModuleFederationPlugin(
      filename: 'remoteEntry.js', //作为远程组件向外提供服务时候得文件名
      name: 'remote', // 输出的模块名，被远程引用时路径为$name/$expose， 打包后的remoteEntry就暴露了一个remote全局变量。
      exposes: 
        // 远程应用时可暴露得资源路径及其别名，外部想应用就得 remote/NewList，引用rmeote得NewList组件
        './NewList': './src/NewList',
      ,
    ),

这样在打包的时候就会多打包出一份remoteEntry文件，然后

remote被作为了全局变量。


他就可以通过这个获取到了本地的NewList组件。然后就可以提供给别人使用了。
但是入口文件需要注意


需要改成这种异步写法。并且静态资源的配置

这里必须写死绝对路径。

然后需要在另一个应用host也配置模块联邦的插件

引用的应用只需要配置rmeote从哪里来。
然后正常使用即可。
看效果：

在host应用上成功使用了NewList文件。
成功加载remoteEntry，remote应用的output.publicPath需要配置绝对路径的原因就是因为这里的remoteEntry文件可能会引用其他js文件，如果配置的不是绝对路径，那么就是从host应用地址去找了。就会报错。还要设置允许跨域。而且host应用不会打包newList组建的代码。

shared属性

在remote和Host加上。

主机

这个字段的用处就是，将react和react-dom共享出去，如果两个应用有一个已经加载了react，那么另一个就不需要加载了。会有版本检查，如果版本一样，就直接复用，不一样，就各自各自的。

启动的时候，
使用共享模块react，和提供共享模块。

总结：

remote应用需要使用插件暴露文件名，暴露的组件，并且设置静态资源路径，跨域等等。
host应用需要使用插件注明引用的来源，使用lazy正常使用即可。