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
				}
			}
		]
	}
}