博客

webpack中处理样式图片的url-loader配置

module:{
	rules:[
	{	
		test: /\.(jpg|png|gif)$/i,  //i表示忽略图片格式大小写，例如.PNG
		use: [{
			loader: 'url-loader',  // url-loader依赖于file-loader所以这两个包都需要下载
			options:{
				limit: 10*1024 //如果图片小于10k，就使用base64处理，
				name: '[hash10].[ext]' //取hash值的前10位，[ext]:取原来的扩展名.jpg .png
			}
		}]
	}
	]
	
}

base64


优点

• base64格式的图片是文本格式，降低了资源服务器的损耗。
• 网页中使用base64格式的图片时，不再请求服务器调用图片资源，减少了对服务器的请求次数。
• base64编码的字符串更适合不同平台、不同语言的传输。

缺点

• base64格式的文本内容较多，存储在数据库中增大了数据库的压力
• 网页加载虽然不用再请求服务器了，但是base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验
• base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css, 这比直接缓存图片要查很多，而且一般html改动比较频繁，所以等同得不到缓存效益

摘抄：

base64的优缺点


base64是通过文本记录像素方式来保存图片的，与原有二进制保存图片的方式不同，转码后的图片可能更大



使用base64的不是为了节省存储空间，而是为了减少请求。因为请求不仅耗时而且还费服务器。

这也是为什么，会限制增加limit字段，限制图片在一定的大小内使用base64转码。否则，图片过大，base64后的文本耗内存更大，请求速度更慢，得不偿失。

webpack中html中引入的图片应该怎么配置呢？

请戳这里：

webpack中处理html中引入的＜img＞图片