主要功能更新
- 通过持久缓存提高构建性能
- 使用更好的算法和默认值选项改善长期缓存
- 通过更好的Tree Shaking和代码生成来改善生成包大小
- 改善与Web平台的兼容性
- 在不引入任何重大更改的前提下，实现v4版本中的功能的同时清理处于异常状态的内部结构
- 现在就引入重大更改，为将来的功能做准备，使我们能够尽可能长时间地使用v5
1. 重大变更：长期缓存
确定的 Chunk、模块 ID 和导出名称
新增了长期缓存的算法。这些算法在生产模式下是默认启用的。chunkIds: "deterministic"、moduleIds: "deterministic" 、mangleExports: "deterministic"该算法以确定性的方式为模块和分块分配短的（3 或 5 位）数字 ID， 这是包大小和长期缓存之间的一种权衡.
moduleIds/chunkIds/mangleExports: false 禁用默认行为，你可以通过插件提供一个自定义算法。请注意，在 webpack 4 中，moduleIds/chunkIds: false 如果没有自定义插件，则可以正常运行，而在 webpack 5 中，你必须提供一个自定义插件。(没卵用)
迁移：最好使用 chunkIds、moduleIds 和 mangleExports 的默认值。你也可以选择使用旧的默认值chunkIds: "size"，moduleIds: "size", mangleExports: "size"，这将会生成更小的包，但为了缓存，会更频繁地将其失效。
注意：在 webpack 4 中，散列的模块 id 会导致gzip性能(文件压缩)降低。这与模块顺序的改变有关，已经被修正。
注意：在 webpack 5 中，deterministic Ids 在生产模式下是默认启用的。
弃用了 optimization.moduleIds: "hashed",添加了 optimization.moduleIds: "deterministic"。
2. 重大变更：性能优化
持久缓存(更快的编译速度)
cache在webpack4版本中就有,不过需要进行配置， webpack5不再需要cache-loader。 对于babel cacheDirectory 等也是如此。
3. 重大变更: 功能清除
不再为 Node.js 模块自动引用 Polyfills
迁移：
尽量使用前端兼容的模块
可以手动为Node.js 核心模块添加 polyfill。错误提示会告诉你如何实现。
Package 作者：在 package.json 中添加 browser 字段，使 package 与前端兼容。为浏览器提供其他的实现/dependencies。
4. 重大变更: 构建优化
tree-shaking
代码块拆分与模块大小 minSize、maxSize
在webpack4中默认只能处理js的大小
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "all",
name: "commons",
minChunks: 1,
minSize: "数值",
maxSize: "数值"
}
}
}
}
}
但在webpack5中，可以把js和css都进行处理
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "all",
name: "commons",
}
},
//最小的文件大小 超过之后将不予打包
minSize: {
javascript: 0,
style: 0,
},
//最大的文件 超过之后继续拆分
maxSize: {
javascript: 1, //故意写小的效果更明显
style: 3000,
}
}
}
}
参考文档: