在大型利用中， 咱们可能会对其进行拆分，分成容器、主利用和多个子利用，使拆分后的利用独立开发与部署，更加容易保护。但无论是微利用、公共模块利用，都须要放到容器中能力应用。
如果多个利用之间心愿资源共享，除了应用 npm 包的模式，基于Webpack 5 Module Federation（模块联邦）实现的EMP微前端计划也能够一试，它不限度技术栈，但依赖于 Webpack5。
应用场景
如果利用B须要应用利用A中的User模块，那么利用B就相当于容器，同时利用A也能够应用来自利用C的Menu模块，此时利用A变成了容器。
如何应用
要想应用 Module Federation，必定是须要搭建 webpack 环境，配置形式也比较简单，应用 ModuleFederationPlugin 别离导出/导出即可。
A利用导出文件
webpack配置须要导出的文件门路和名称
// 其余配置省略const Mfp = require('webpack').container.ModuleFederationPlugin;module.exports = { plugins: [ new Mfp({ // 对外提供打包后的文件名 filename: 'user.js', // 导出的利用/组织什么名字 name: 'userComponent', // 要导出哪一个文件，key值为引入时的名字，value为以后文件门路 exposes: { './username': './src/username.js', './userHobby': './src/userHobby.js', } }) ]}B利用导入文件
webpack设置须要导入的资源地址和名称
const Mfp = require('webpack').container.ModuleFederationPluginplugins: [ new Mfp({ name: 'root', // key值为导入后应用的名字，value为导出的 filename@文件地址/name，设置本地服务地址不便调试 remotes: { userComponent: 'userComponent@http://localhost:3001/user.js' } })]在须要应用的js文件中异步导入，userComponent 是定义的导入后的名字，斜杠（/）加上导出文件webpack配置exposes属性的文件名
const Username = React.lazy(()=>import('userComponent/username'))const UserHobby = React.lazy(()=>import('userComponent/userHobby'))return (<React.Suspense fallback="loading"> <Username/> <UserHobby/></React.Suspense>)引入后，http://localhost:3001/user.js 将会被加载，并且资源内容挂载到 window 对象中。
这样，便能够达到利用之间共享组件的目标。
以上就是 Webpack Module Federation（模块联邦） 的介绍， 更多无关 前端、工程化 的内容能够参考我其它的博文，继续更新中~