資訊專(zhuān)欄INFORMATION COLUMN
摘要：功能可以在中根據(jù)圖片類(lèi)型轉(zhuǎn)換成一份和原圖兩份圖片，并且集成了的功能支持的功能和文件名的功能。還有一些的大家仔細(xì)去讀相關(guān)文檔參考
在上篇Vuejs webp圖片支持，插件開(kāi)發(fā)過(guò)程~ 中我做了一個(gè)圖片轉(zhuǎn)換成webp的組件，并且使用了相關(guān)的loader，但是我們?cè)谑褂眠^(guò)程中發(fā)現(xiàn)webp和原圖的hash是不一樣的，這樣我們就沒(méi)有辦法保留版本的概念了，臨時(shí)我使用時(shí)間戳來(lái)作為替代，但是這樣每次上傳都會(huì)重新上傳所有文件，有點(diǎn)浪費(fèi)硬盤(pán)，于是我今天做了這個(gè)towebp-loader。
功能towebp-loader 可以在webpack中根據(jù)圖片類(lèi)型轉(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
使用方法
關(guān)鍵源碼講解
……
// 獲取loader中的查詢(xún)字符串 使用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ù)來(lái)自u(píng)rl-loader 如果小于這個(gè)值使用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 大家仔細(xì)去讀相關(guān)文檔
參考webp-loader
url-loader
file-loader
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92372.html
摘要：那時(shí)候所配置的任務(wù)監(jiān)聽(tīng)匹配文件的變化自動(dòng)刷新瀏覽器自動(dòng)編譯自動(dòng)補(bǔ)全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務(wù)，已經(jīng)是完全滿(mǎn)足我們的需求了。直至到后來(lái)在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。 折騰 從 2015 到現(xiàn)在，短短的三年內(nèi)，幾乎每年折騰一下工作流的 更新?lián)Q代 。從最早開(kāi)始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...
摘要：我采用原生編寫(xiě)后臺(tái)，因?yàn)楦杏X(jué)增刪改查的功能很簡(jiǎn)單，就懶得用框架了其實(shí)是不會(huì)。瀏覽模式它也有一個(gè)，用來(lái)切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進(jìn)行文章的撰寫(xiě)與修改。 介紹 項(xiàng)目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...
摘要：隨著承擔(dān)地職責(zé)越來(lái)越大，模塊化開(kāi)發(fā)的需求越來(lái)越急迫。我們可以把當(dāng)成是模塊化標(biāo)準(zhǔn)的實(shí)現(xiàn)方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個(gè)的輸出就是我們最終要的結(jié)果。在文件有值的情況下，是必要的。 由于web應(yīng)用擴(kuò)展地得極其迅猛，前端技術(shù)也是日新月異，前端的苦不是有多難學(xué)，而是我剛學(xué)完，這東西就被淘汰了（手動(dòng)哭臉）?？蚣芊矫嫖覀冇衯ue、react...
摘要：一個(gè)文件，一張圖片一個(gè)文件都是一個(gè)模塊，都能用導(dǎo)入模塊的語(yǔ)法的，的導(dǎo)入進(jìn)來(lái)。自身只能讀懂類(lèi)型的文件，其它的都不認(rèn)識(shí)。 webpack 是什么？ webpack是一個(gè)前端模塊化打包工具指（由于模塊化開(kāi)發(fā)，所以需要打包，這里所說(shuō)的模塊化開(kāi)發(fā)主要指JS) 由于現(xiàn)代前端應(yīng)用程序越來(lái)越復(fù)雜，需要采用模塊化進(jìn)行開(kāi)發(fā)，但瀏覽器還未支持模塊化開(kāi)發(fā)，所以webpack才誕生 webpack默認(rèn)只支持js...
閱讀 2038·2021-11-23 10:08
閱讀 2371·2021-11-22 15:25
閱讀 3308·2021-11-11 16:55
閱讀 806·2021-11-04 16:05
閱讀 2684·2021-09-10 10:51
閱讀 735·2019-08-29 15:38
閱讀 1614·2019-08-29 14:11
閱讀 3514·2019-08-29 12:42
