webpack5和webpack4的一些区别
自动清除打包目录
- webpack4
// bash
npm i clean-webpack-plugin -D
//webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
}
}
- webpack5
module.exports = {
output: {
clean: true
}
}
topLevelAwait
webpack5允许在模块的顶级代码中直接使用await,比如:
function delay(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("resolve")
}, time)
})
}
var res = await delay(1000)
console.log('res: ', res);
export default res;
由于topLevelAwait
还未成为正式标准(官方文档),所以需要在webpack.config.js
配置一下:
module.exports = {
experiments: {
topLevelAwait: true
}
}
打包体积优化
webpack5对模块的合并、作用域提升、tree shaking 等处理更加智能和简洁
打包缓存优化
webpack4
需要使用cache-loader
打包结果来优化之后的打包性能
webpack5
默认就开启了打包缓存(官方文档),无需再安装cache-loader
资源模块loader
webpack5不需要再安装 file-loader、url-loader、raw-loader 处理静态资源文件了(官方文档)
- webpack4
npm i file-loader url-loader -D // 将小文件转为base64的时候需要用到file-loader
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10240, // 低于10k的图片直接转为base64
esModule: false,
outputPath: 'images',
name: '[name][contenthash:4].[ext]',
}
},
]
}
]
}
}
- webpack5
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // // 低于10k的图片直接转为base64
}
},
generator: {
filename: 'assets/img/[hash:4][ext]', 这个配置的优先级高于output的assetModuleFilename
}
}
]
}
}
青云直上三千码