詳解webpack之圖片引入-增強的file-loader：url-loader

前言：

本文介紹了url-loader（增強的file-loader）；

url-loader作用：根據需求選擇性的把某些小圖片編碼成base64格式寫進頁面；從而減少服務器請求。優化性能。

url-loader解決的問題:

如果圖片較多，會發很多http請求，會降低頁面性能。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小于limit字節的文件會被轉為DataURl，大于limit的還會使用file-loader進行copy。

url-loader和file-loader是什么關系呢？

簡答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader。

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

1.文件大小小于limit參數，url-loader將會把文件轉為DataURL；

2.文件大小大于limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。

正文：

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

url-loader可以看作是增強版的file-loader。

url-loader把圖片編碼成base64格式寫進頁面，從而減少服務器請求。

安裝url-loader

npm i -D url-loader

配置webapck.config.js

執行 npm run build

在dist目錄下面找到build成功的index.html頁面。在瀏覽器的控制臺中可以看到圖片以base64的格式加載進頁面。

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

補充：簡單介紹下url-loader的配置

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

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

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

} 

補充一個：如何打包html文件中的圖片呢？

首先安裝相應的loader：

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

在webpack.config.js中做相應的配置：

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

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

import '../index.html';

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。