towebp-loader诞生记~ 一个webpack 图片loader

2024年5月23日 235次阅读 来源: 冰星寒水

在上篇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

    原文作者：冰星寒水
    原文地址: https://segmentfault.com/a/1190000008764613
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞