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

wenzi 發布于2019-08-22 13:02 / 574人閱讀

摘要：功能可以在中根據圖片類型轉換成一份和原圖兩份圖片，并且集成了的功能支持的功能和文件名的功能。還有一些的大家仔細去讀相關文檔參考

在上篇Vuejs webp圖片支持，插件開發過程~ 中我做了一個圖片轉換成webp的組件，并且使用了相關的loader，但是我們在使用過程中發現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) {
  return "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

云服務器 GPU云服務器誕生記 html插入一個圖片誕生誕生了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92372.html

前端團隊 Gulp & Webpack 工作流遷移記

摘要：那時候所配置的任務監聽匹配文件的變化自動刷新瀏覽器自動編譯自動補全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務，已經是完全滿足我們的需求了。直至到后來在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。折騰從 2015 到現在，短短的三年內，幾乎每年折騰一下工作流的更新換代。從最早開始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...

Baaaan 2019-08-20 17:17 評論0 收藏0
采用vue+webpack構建的單頁應用——私人博客MintloG誕生記

摘要：我采用原生編寫后臺，因為感覺增刪改查的功能很簡單，就懶得用框架了其實是不會。瀏覽模式它也有一個，用來切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進行文章的撰寫與修改。介紹項目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 評論0 收藏0
webpack4介紹與總結

摘要：隨著承擔地職責越來越大，模塊化開發的需求越來越急迫。我們可以把當成是模塊化標準的實現方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個的輸出就是我們最終要的結果。在文件有值的情況下，是必要的。由于web應用擴展地得極其迅猛，前端技術也是日新月異，前端的苦不是有多難學，而是我剛學完，這東西就被淘汰了（手動哭臉）。框架方面我們有vue、react...

yanbingyun1990 2019-08-23 10:42 評論0 收藏0
前端構建_webpack

摘要：一個文件，一張圖片一個文件都是一個模塊，都能用導入模塊的語法的，的導入進來。自身只能讀懂類型的文件，其它的都不認識。 webpack 是什么？ webpack是一個前端模塊化打包工具指（由于模塊化開發，所以需要打包，這里所說的模塊化開發主要指JS) 由于現代前端應用程序越來越復雜，需要采用模塊化進行開發，但瀏覽器還未支持模塊化開發，所以webpack才誕生 webpack默認只支持js...

ethernet 2019-08-23 14:24 評論0 收藏0