在上篇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
使用方法
关键源码讲解
……
// 获取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) {
callback( "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 大家仔细去读相关文档
