第五十二篇：webpack的loader(三) -url-loader (图片的loader)

好家伙，

 

1.什么是base64?

 

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的

没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，

而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。

使用base64编码可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环

将图片进行转码

 

将解好的码

再放到"src"中 

 

 

 

 

 

可以看到效果是一样的

 (小的图片,如logo可以用,较大较复杂的图片不建议使用)

 

2.安装并配置处理图片的loader

打包处理样式表中与url 路径相关的文件

2.1安装

运行

npm i url-loader@4.1.1file-loader@6.2.0-D

 

2.2.在webpack.config.js的 module ->rules 数组中，添加 loader 规则如下：

module:{       //所有第三方文件模块的匹配规则

        rules:[   // 文件后缀名的匹配规则
            
            ｛ test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
           　　　　　　　　　　　　　　　　　　　　　　　　　　//参数,,参数值  
        ]

}  

 

其中,之后的是loader的参数项：

1.limit用来指定图片的大小，单位是字节（byte)

(只有在小于这个值的时候才会将该图片转为base64)

2.只有≤limit 大小的图片，才会被转为 base64格式的图片

 

2.3.在.js文件中导入图片

(  在webpack中,一切皆模块,都可以通过ES6导入语法进行导入和使用  )

//1.导入图片得到图片文件
　　import logo from './images/logo.jpg'

//2.给img标签的src动态赋值

　　$('.box').attr('src',logo)

 

 

 

搞定!