国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wenzi / 576人閱讀

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

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

功能

towebp-loader 可以在webpack中根據(jù)圖片類型轉(zhuǎn)換成一份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)
關(guān)鍵源碼講解 
……
// 獲取loader中的查詢字符串 使用webpack loader api
var query = loaderUtils.parseQuery(this.query);
 // 保存源文件的路徑如果穿 name就使用不然使用默認(rèn)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參數(shù)來自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"));
}
……
// 轉(zhuǎn)換原圖成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 大家仔細去讀相關(guān)文檔

參考

webp-loader
url-loader
file-loader

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92372.html

相關(guān)文章

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

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

    Baaaan 評論0 收藏0

  • 采用vue+webpack構(gòu)建的單頁應(yīng)用——私人博客MintloG誕生記

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

    Terry_Tai 評論0 收藏0

  • webpack4介紹與總結(jié)

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

    yanbingyun1990 評論0 收藏0

  • 前端構(gòu)建_webpack

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

    ethernet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<