接昨天的内容,在src目录下新建一个目录images,在目录中放入图片123.jpg
在index.css文件中引入图片做背景
.box {
margin: 0;
padding: 0;
width: 300px;
height: 400px;
/*background-color: red;*/
background: url('../images/123.jpg');
background-size: cover;
}
保存,运行,发现报错了,是因为在默认情况下,webpack无法处理css文件中的URL地址,不管是图片还是字体库,只要是URL地址,都处理不了。
根据错误信息“You may need an appropriate loader to handle this file type”,知道是缺少一个loader,这个loader就是url-loader
1. 安装url-loader
npm i url-loader file-loader -D
注意:url-loader依赖file-loader,所以这里需要安装两个loader
2. 添加配置节点
在webpack.confg.js文件中加入配置文件
// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader' }
注意:
1. 因为图片后缀有多种,所以这里用正则表达式来表示所有的后缀名
2. 这里明明有两个loader,为什么use后面只写了一个url-loader了?这是因为file-loader是url-loader内部依赖的,所以这里不需要在use中定义
3. 当use后面只有一个loader的时候,可以用字符串表示,不需要用数组的形式
3. 运行
npm run dev
页面正常显示图片
用开发者工具查看图片链接,发现图片链接被转码成了base64的字符串,但是实际中,我们并不需要每一个图片都转成base64编码,有时候大图片是不需要转的。这时候,我们需要给url-loader配置所需要的参数
4. loader传参
传参的格式和url地址传参的格式一模一样。
4.1 limit参数
但是,这里传参有一个固定的参数limit
格式:?limit=文件限制的大小
limit给定的值是图片的大小,单位是byte,如果引用的图片的字节大于或等于给定的值,那么不进行base64编码的字符串
例如:当图片大小大于7632个字节的时候不进行base64编码
// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7632' }
4.2 name参数
limit参数解决了图片进行base64编码的问题,但是,我们发现,图片的在url中图片的名称发生了变化,变成一连串的字符串,这样是为了保证图片的唯一性,但是当我们在网页中多处引入同一张图片的时候,就无法实现了,需要引入多次,这时候,就需要使用name参数来指定图片的名称为原本的名称。
格式:name=[name].[ext] ,[name]表示原来的图片加什么名称,现在还叫什么名。[ext]表示,后缀名和原来保持一致
例如:
// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=391&name=[name].[ext]' }
但是,这样会出现一个问题,就是当我们有两个images目录,分别放置了两张不一样的图片,但是名称都是一样的,在页面中分别引用这两张图片的时候,webpack会帮我们打包解析成后引入的图片,也就是页面都会显示后面引入的图片。
那要怎么办呢,我们可以在图片名称前面加上hash值,用于区分。
格式:[hash:8]- ,表示在名称前面加上一个8位的hash值并用“ - ”连接
例如:
// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=391&name=[hash:8]-[name].[ext]' }
注意:hash值是一个32位的字符串,所以这里最大值为32,每一张图片的hash值都不一样,hash:8表示从该图片的32位hash值中截取前8位