webpack中url-loader的使用

1、使用url-loader引入图片，可以说它是file-loader的增强版

• （1）、第一步：安装url-loader (cnpm i url-loader file-loader -D)
• （2）、配置：
• main.js导入css

import 'CSS路径'

module:{
	rules:[
		{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=10000$name=[hash:8]-[name].[ext]'},
		//limit : 给定的值小于等于图片大小就是图片地址，如果大于就是base64
		//name : 如果没有name， webpack就会重新取个新名字。
		//name = [name].[ext] : 表示用图片原来的名字
		//hash[8] : 表示取 hash 值得前8位（一共32位数）
	]
}

• （3）、css

html,body{
	.box{
		width:200px;
		height:120px;
		background:url("图片路径");
		background-size:cover;
	}
}

2、使用url-loader访问字体

• 配置
• main.js导入bootstrap

import 'bootstrap.css路径'

{ test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader' },