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

前言：

十余年的依蘭網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整依蘭建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“依蘭網(wǎng)站設計”,“依蘭網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

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

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

url-loader解決的問題:

如果圖片較多，會發(fā)很多http請求，會降低頁面性能。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數(shù)，小于limit字節(jié)的文件會被轉(zhuǎn)為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內(nèi)置了file-loader。

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

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

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

正文：

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

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

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

安裝url-loader

npm i -D url-loader

配置webapck.config.js

執(zhí)行 npm run build

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

現(xiàn)在我們做一些優(yōu)化，如果圖片大小小于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';

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標題：詳解webpack之圖片引入-增強的file-loader：url-loader
文章鏈接：http://bm7419.com/article32/jddppc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、動態(tài)網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)