Webpack处理文件资源

处理文件资源

过去Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理，现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只要简单配置即可处理图片资源

1、配置

module:{
	rules: [
		{
			test: /\.(png|jpe?g|gif|webp)$/,
			type: "asset"
		},
		{
			test: /\.(png|jpe?g|gif|webp｜svg)$/,
			type: "asset",
			parser: {
				dataUrlCondition: {
					// 小于10kb的图片转base64
					// 优点：减少请求数量  缺点： 体积会更大
					maxSize: 10 * 1024, // 10kb
				}
			}
		}
	]
}