关于webpack:Webpack5-模块联邦

概述

1.模块联邦基于Webpack5根底上的一款插件，具备Webpack最新个性

Tree Shaking 更优
Node.js polifill 给为按需加载
缓存机制优化
优化打包命名算法

2.模块联邦能够将利用划分为更小的利用块，比方头部导航或侧边栏，也能够是数据获取逻辑的逻辑组件
3.每个利用块由不同的组开发
4.利用或利用快共享其余利用块或者库

新增配置项

 module.exports ={    watch:true, // 增量编译    cache{      // 缓存+     type:'filesystem' // memory filesystem    },    optimization:{+     moduleIds:'natural',//模块名称的生成规定+     chunkIds:'natural'  //代码块名称的生成规定    },    output:{      filename:'[name.js]',    //入口代码块文件名的生成规定      chunkFilename:'[name.js]'//非入口模块的生成规定    },    pulages:[      ....+     {test:/\.png$/,type:'asset/resource'},//对标file-loader+     {test:/\.ico$/,type:'asset/inline'},  //对标url-loader 模块的大小 < limit base64字符串+     {test:/\.txt$/,type:'asset/source'},  //对标raw-loader 源文件读取+     {test:/\.jpg$/,type:'asset',parser{dataurlCoundition:{maxSize:4*1024}}} // type:'asset' 示意须要webpack打包的资源      ....    ] }

optimization moduleIds:
1.natural 按应用程序的数字ID
2.named 不便调试的高可读性ID
3.deterministic 依据模块名称生成简短的hash值
4.size 依据模块大小生成的数字id

模块联邦

module.exports = {   ...   plugins:[    ...+    new ModuleFederationPlugin({+    name:'remoteVar',+    filename:'remoteEntry.js',+    exposes:{+     './NewsList':'./src/NewsList'+    },+    remotes:{+     host:'hostVar@http://localhost:8081/remoteEntry.js'+    },+    shared:['react','react-dom']       ]}

name 必须【惟一ID】作为输入的模块名，应用的时通过 ${name}/${expose} 的形式应用，裸露在window中的全局对象；
library 必须【变量】其中这里的 name 为作为 umd 的 name；
filename 可选【裸露】构建出的文件名称
exposes 可选【裸露】组件，示意作为 Remote 时，export 哪些属性被生产；
remotes 可选【援用】示意作为 Host 时，去生产哪些 Remote；
shared 可选【共享】共享池任何一方加载过，另外一方就不须要再加载了；