webpack5新特性概览
webpack5在2020.10发布。changelog： webpack.docschina.org/blog/2020-1…
对node.js的支持版本从6.x增加到10.13.0。
功能清除
- require.includes语法被废弃，require.includes作用是加载一个模块，但并不马上执行，当异步加载模块，可以实现模块预加载，其他模块用该模块时候就不会重复加载。
- 不再为node.js模块引入polyfill。
之前版本是，如果某个模块依赖node.js里面的核心模块，那么这个模块被引入的时候会把node.js整个polyfill顺带引入，造成体积过大。
NodeSourcePlugin插件中，引入node-libs-browser，进行判断处理。
长期缓存
- 确定的Chunk、模块Id和导出名称，之前是按顺序产生，webpack5分配一个固定的（3或5位）数字ID
持久化缓存
webpack4中，可以使用cache-loader将编译结果写入硬盘缓存，webpack5增加了缓存策略，默认是在内存里
module.exports = {
cache: {
// 1. 将缓存类型设置为文件系统，这样是写在磁盘，默认是memory，是在内存里面
type: 'filesystem',
buildDependencies: {
// 2. 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效
config: [__filename],
// 3. 如果你有其他的东西被构建依赖，你可以在这里添加它们
// 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
},
},
};
缓存淘汰策略：文件缓存存储在node_modules/.cache/webpack中，最大500MB，缓存时长两个星期，旧的缓存先淘汰。
构建优化
- 嵌套的tree-shaking：可以在生产模式下删除导出的b
// inner.js
export const a = 1;
export const b = 2;
// module.js
export * as inner from './inner';
// 或 import * as inner from './inner'; export { inner };
// user.js
import * as module from './module';
console.log(module.inner.a);
webpack4:
webpack5:
- 内部模块tree-shaking
import { something } from './something';
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
如果没有引用test，webpack4会将usingSomething打包进去，而webpack5会进行分析，只有在使用test时才打包。
代码生成
webpack4之前只生成ES5代码，webpack5既可以生成ES5，也可以生成ES6代码。
module.exports = {
output: {
// 5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020
ecmaVersion: 6
}
}
模块联邦
基本解释：使一个javascript应用在运行过程中可以动态加载另一个应用的代码，并支持共享依赖（CDN），不再需要本地安装npm包。
Remote：被依赖方，被Host消费的webpack构建；
Host：依赖方，消费其他Remote的Wbpack构建；
一个应用可以使Host，也可以使Remote，也可以同时是Host和Remote。
通过ModuleFederationPlugin插件将多个应用结合起来。
参数：
Host：
Remote：提供了暴露的模块Button
bundle和bundless的差异
bundless不再生成bundle，所以冷启动快，热更新快，而且不用sourcemap配置方便调试，但是鉴于浏览器兼容性（占比90%以上，但是还是有部分不兼容），目前生产环境还是使用bundle。
极客时间-玩转webpack
