关于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 可选【共享】共享池任何一方加载过，另外一方就不须要再加载了；