資訊專欄INFORMATION COLUMN
摘要：既生瑜，何生亮人家當(dāng)然不是以賣萌為生的，賣萌不可恥，但是是有它的用處的。對(duì)未設(shè)置或者小于設(shè)置的圖片進(jìn)行轉(zhuǎn)換，以的格式被的所使用而對(duì)于大于的圖片用進(jìn)行解析。配置工欲善其事必先利其器。
url-loader vs file-loader
既生瑜，何生亮？
人家當(dāng)然不是以賣萌為生的，賣萌不可恥，但是url-loader是有它的用處的。url-loader對(duì)未設(shè)置或者小于limit設(shè)置的圖片進(jìn)行轉(zhuǎn)換，以base64的格式被img的src所使用；而對(duì)于大于limit byte的圖片用file-loader進(jìn)行解析。
over~~,稍微瞄一下代碼，是不是很簡(jiǎn)單，自己都在偷偷笑了，哇咔咔
不過(guò)雖然寥寥幾行，還是有不懂得膩：
模塊入?yún)ontent是個(gè)Buffer類型？
Buffer是啥？是node處理二進(jìn)制數(shù)據(jù)的接口哦，toString()方法可以幫你把二進(jìn)制轉(zhuǎn)化成base64格式，Buffer可以吃么，看我
為啥是Buffer類型？這個(gè)webpack處理有關(guān)系嘍~，默認(rèn)情況下，資源文件會(huì)被轉(zhuǎn)換成utf-8字符串傳給loader處理。這個(gè)代碼里我們看到它設(shè)置了raw，翻譯一下：loader這樣就可以接受原始的Buffer了。如何寫一個(gè)Loader?難道你不想知道么？
file-loader最后一步干了啥？
emitFile(name: string, content: Buffer|String, sourceMap: {...}) 這是 webpack loader context提供的內(nèi)部方法，根據(jù)路徑和內(nèi)容生成一個(gè)新的圖片，供html以絕對(duì)路徑的方式進(jìn)行請(qǐng)求和使用。
在file-loader的option配置中可以將emitFile設(shè)置為false，文件不再被重新創(chuàng)建，多用于在服務(wù)端模塊的使用，圖片直接使用服務(wù)端的即可。
url-loader 配置工欲善其事,必先利其器。
看一下官網(wǎng)webpack給出的url-loader的配置參數(shù)吧。
戳我
| 配置名稱 | 類型 | 默認(rèn)值 | 含義 |
|---|---|---|---|
| limit | {Number} | undefined | 轉(zhuǎn)化為data-url內(nèi)聯(lián)使用的文件帶下閾值 |
| mimetype | {String} | 文件擴(kuò)展名 | 文件的mimetype類型（默認(rèn)使用文件擴(kuò)展類型） |
| fallback | {String} | file-loader | 在文件大于limit時(shí)，交于處理的加載器 |
在webpack中配置可如下：
知其然之其所以然。
通過(guò)url-loader將小圖片轉(zhuǎn)換為base64后，面對(duì)一長(zhǎng)串的它，你是否困惑了呢？它是誰(shuí)？它又是怎么出現(xiàn)的？
帶著這個(gè)問(wèn)題，我們順路看一下這個(gè)小東西的原理吧：
[名字的由來(lái)]：通過(guò)下面64個(gè)可打印的字符來(lái)表示二進(jìn)制數(shù)據(jù)
[它的原理]：64=2的6次方，因此每6位都可以用一個(gè)base64字符表示。而每1個(gè)
字節(jié)是8位，那么3個(gè)字節(jié) = 3 * 8 = 24bit = 6 * 4 = 4個(gè)base64字符(這樣看來(lái)，用base64
表示二進(jìn)制，比原來(lái)二進(jìn)制表示多了1/3倍的字節(jié))。
[它的步驟]
按照字符長(zhǎng)度，每3個(gè)8bit的字符為一組（不過(guò)3的倍數(shù)的字符組，用“=”進(jìn)行填充）
根據(jù)分組，將每個(gè)字符用ASCII進(jìn)行編碼，并將其轉(zhuǎn)換為8bit的二進(jìn)制，從而得到一組3*8=24bit的字節(jié)
（如果不夠24bit，用0進(jìn)行填充）
將24bit劃為4個(gè)6bit，轉(zhuǎn)換成10進(jìn)制值，在base64表中查找對(duì)應(yīng)的符號(hào)，轉(zhuǎn)換后的字符拼接起來(lái)就是最后的結(jié)果了.
看一下這個(gè)小例子，練練手吧~
“Girl” => “JGlybA==”
說(shuō)了這么多原理，那用了它，對(duì)我們有什么實(shí)際的好處呢？這個(gè)分情況討論呢。
首先我們要了解一下它的優(yōu)缺點(diǎn)，這樣就好判斷使用場(chǎng)景了。
優(yōu)點(diǎn) vs 缺點(diǎn)
對(duì)于比較小的圖片，使用base64編碼，可以減少一次圖片的網(wǎng)絡(luò)請(qǐng)求；那么對(duì)于比較大的圖片,使用base64就不適合了，編碼會(huì)和html混在一起，一方面可讀性差，另一方面加大了html頁(yè)面的大小，反而加大了下載頁(yè)面的大小，得不償失了呢，因此設(shè)置一個(gè)合理的limit是非常有必要的；
另一方面，base64編碼的圖片不能像正常的圖片可以進(jìn)行緩存，因此寫在css里面可以讓瀏覽器對(duì)css文件進(jìn)行緩存也不錯(cuò)哦；
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88941.html
摘要：會(huì)將引入的圖片編碼，生成并將其打包到文件中，最終只需要引入這個(gè)就能訪問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。不依賴于，即使用時(shí)，只需要安裝即可，不需要安裝。 大家平時(shí)使用url-loader和file-loader的時(shí)候有沒(méi)有經(jīng)常遇到以下這些問(wèn)題或者疑問(wèn)： 開(kāi)發(fā)環(huán)境的時(shí)候圖片路徑好好的，怎么發(fā)布到線上就404了？？？或者說(shuō)html里面引用的img路徑是正確的，怎么到css里面路...
摘要：比如通過(guò)安裝實(shí)例一新建一個(gè)然后編輯加入打開(kāi)瀏覽器，看到屏幕輸出會(huì)給每個(gè)模塊一個(gè)唯一的然后通過(guò)存取這些模塊，這些模塊都會(huì)被整合到里面。以上設(shè)置會(huì)輸出一個(gè)的文件。 從模塊化談起 近年來(lái)，js開(kāi)發(fā)涌現(xiàn)出了諸多模塊化解決方案，例如以在瀏覽器環(huán)境之外（服務(wù)端）構(gòu)建 JavaScript 生態(tài)系統(tǒng)為目標(biāo)而產(chǎn)生的CommonJS規(guī)范，從CommonJS社區(qū)中獨(dú)立出來(lái)的AMD規(guī)范（異步模塊定義），還有...
webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laodershowImg(https://segmentfault.com/img/remote/1460000005742040); 一、loaders之 預(yù)處理 css-loader 處理css中路徑引用等問(wèn)題 style-loader 動(dòng)態(tài)把樣式寫入css sass-loader scss編譯器 ...
摘要：目錄第課安裝和第課配置文件第課做為的一個(gè)模塊來(lái)使用第課插件篇第課模塊篇第課在開(kāi)發(fā)中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內(nèi)置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁(yè)萬(wàn)事開(kāi)頭 webpack目錄 第1課: 安裝webpack和webpack-dev-server 第2課: 配置文件 第3課: 做為node的一個(gè)模塊來(lái)使用 第4課: ...
摘要：項(xiàng)目地址一知識(shí)獲取當(dāng)前文件所在路徑，等同于把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑給定的路徑的序列是從右往左被處理的，后面每個(gè)被依次解析，直到構(gòu)造完成一個(gè)絕對(duì)路徑如果處理完全部給定的片段后還未生成一個(gè)絕對(duì)路徑，則當(dāng)前工作目錄會(huì)被用上生成 項(xiàng)目git地址 一、node知識(shí) __dirname: 獲取當(dāng)前文件所在路徑，等同于path.dirname(__filename) consol...
閱讀 2977·2021-10-19 10:09
閱讀 3190·2021-10-09 09:41
閱讀 3458·2021-09-26 09:47
閱讀 2780·2019-08-30 15:56
閱讀 650·2019-08-29 17:04
閱讀 1042·2019-08-26 11:58
閱讀 2564·2019-08-26 11:51
閱讀 3426·2019-08-26 11:29
