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

wenzi 发布于2019-08-22 13:02 / 543人阅读

摘要：功能可以在中根据图片类型转换成一份和原图两份图片，并且集成了的功能支持的功能和文件名的功能。还有一些的大家仔细去读相关文档参考

在上篇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插入一个图片诞生诞生了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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