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的图片直接转为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}}]}
}