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