自动清除打包目录
- 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的图片直接转为base64esModule: 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}}]}
}