towebp-loader誕生記~ 一個webpack 圖片loader

在上篇Vuejs webp圖片支持表伦,插件開發(fā)過程~ 中我做了一個圖片轉換成webp的組件扁耐,并且使用了相關的loader碍彭,但是我們在使用過程中發(fā)現webp和原圖的hash是不一樣的,這樣我們就沒有辦法保留版本的概念了挣柬,臨時我使用時間戳來作為替代,但是這樣每次上傳都會重新上傳所有文件睛挚,有點浪費硬盤邪蛔,于是我今天做了這個towebp-loader

功能

towebp-loader 可以在webpack中根據圖片類型轉換成一份webp和原圖兩份圖片扎狱,并且集成了url-loader的功能 支持url的limit功能和file-loader文件名的功能侧到。

使用方法

{
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'towebp?' + JSON.stringify({
       limit: 10000,
       name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      })
},

配合vue-webp指令使用效果更佳哦

vue-webp
使用方法

![](abc.jpg)

關鍵源碼講解

……
// 獲取loader中的查詢字符串 使用webpack loader api
var query = loaderUtils.parseQuery(this.query);
 // 保存源文件的路徑如果穿 name就使用不然使用默認hash.ext模式
var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
    content: content,
    regExp: query.regExp
});
// webp 文件的保存路徑
var webpUrl = url.substring(0, url.lastIndexOf('.')) + '.webp';
// limit參數來自url-loader 如果小于這個值使用base64字符串替換圖片
if (query.limit) {
  limit = parseInt(query.limit, 10);
}
var mimetype = query.mimetype || query.minetype || mime.lookup(this.resourcePath);
if (limit <= 0 || content.length < limit) {
  callback( "module.exports = " + JSON.stringify("data:" + (mimetype ? mimetype + ";" : "") + "base64," + content.toString("base64")));
}
……
// 轉換原圖成webp
imagemin.buffer(content, { plugins: [imageminWebp(options)] }).then(file => {
  // 保存原圖
  this.emitFile(url, content);
  // 保存壓縮后的webp圖片
  this.emitFile(webpUrl, file);
  callback(null, "module.exports = __webpack_public_path__ + " + JSON.stringify(url) + ";");
}).catch(err => {
  callback(err);
});
……

主要代碼都在這里了。還有一些webpack loader的API 大家仔細去讀相關文檔

參考

webp-loader
url-loader
file-loader

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末淤击,一起剝皮案震驚了整個濱河市匠抗,隨后出現的幾起案子,更是在濱河造成了極大的恐慌污抬,老刑警劉巖汞贸,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異印机,居然都是意外死亡矢腻,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門射赛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來多柑,“玉大人,你說我怎么就攤上這事楣责】⒐啵” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵秆麸,是天一觀的道長初嘹。 經常有香客問我,道長蛔屹,這世上最難降的妖魔是什么削樊? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上漫贞,老公的妹妹穿的比我還像新娘甸箱。我一直安慰自己,他們只是感情好迅脐,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布芍殖。 她就那樣靜靜地躺著,像睡著了一般谴蔑。 火紅的嫁衣襯著肌膚如雪豌骏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天隐锭,我揣著相機與錄音窃躲,去河邊找鬼。 笑死钦睡,一個胖子當著我的面吹牛蒂窒,可吹牛的內容都是我干的。 我是一名探鬼主播荞怒,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼洒琢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了褐桌?” 一聲冷哼從身側響起衰抑,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荧嵌,沒想到半個月后呛踊,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡完丽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年恋技,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逻族。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖骄崩,靈堂內的尸體忽然破棺而出聘鳞,到底是詐尸還是另有隱情,我是刑警寧澤要拂,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布抠璃,位于F島的核電站,受9級特大地震影響脱惰,放射性物質發(fā)生泄漏搏嗡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望采盒。 院中可真熱鬧旧乞,春花似錦、人聲如沸磅氨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽烦租。三九已至延赌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叉橱,已是汗流浹背挫以。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窃祝,地道東北人掐松。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像锌杀,于是被迫代替她去往敵國和親甩栈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容