前言：

本文介紹了url-loader（增強(qiáng)的file-loader）；

url-loader作用：根據(jù)需求選擇性的把某些小圖片編碼成base64格式寫(xiě)進(jìn)頁(yè)面；從而減少服務(wù)器請(qǐng)求。優(yōu)化性能。

url-loader解決的問(wèn)題:

如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

url-loader和file-loader是什么關(guān)系呢？

簡(jiǎn)答地說(shuō)，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時(shí)，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。

通過(guò)上面的介紹，我們可以看到，url-loader工作分兩種情況：

1.文件大小小于limit參數(shù)，url-loader將會(huì)把文件轉(zhuǎn)為DataURL；

2.文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理，參數(shù)也會(huì)直接傳給file-loader。因此我們只需要安裝url-loader即可。

正文：

代碼和項(xiàng)目目錄用的還是上一篇《webpack之引入圖片》。

url-loader可以看作是增強(qiáng)版的file-loader。

url-loader把圖片編碼成base64格式寫(xiě)進(jìn)頁(yè)面，從而減少服務(wù)器請(qǐng)求。

安裝url-loader

npm i -D url-loader

配置webapck.config.js

執(zhí)行 npm run build

在dist目錄下面找到build成功的index.html頁(yè)面。在瀏覽器的控制臺(tái)中可以看到圖片以base64的格式加載進(jìn)頁(yè)面。

現(xiàn)在我們做一些優(yōu)化，如果圖片大小小于50kb則以base64的格式加載，否則以圖片地址方式加載。

補(bǔ)充：簡(jiǎn)單介紹下url-loader的配置

其實(shí)跟file-loader相比差不多，url-loader會(huì)按照配置把小于一定大小的圖片以dataUrl的形式儲(chǔ)存。

引用方式與上面相同：loader的配置如下：

{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的圖片以dataurl的方式存儲(chǔ)

} 

補(bǔ)充一個(gè)：如何打包html文件中的圖片呢？

首先安裝相應(yīng)的loader：

$ npm install html-withimg-loader --save-dev1

在webpack.config.js中做相應(yīng)的配置：

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}

最后在入口的js文件中引入html

import '../index.html';

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。