webpack模块联邦_coderlin_

未知 02-07 6754

模块联邦

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正常使用即可。