上一节介绍了webpack loader的基本概念以及处理流程,并且简单的实现了使用name-loader
来动态的加载.tpl
文件,正好前面总结了在项目中使用webp优化网站的方案,之前的思路是用一段JavaScript代码生成webp格式的图片,现在换个思路,可以在import some-img from some-img.jpg
的时候,动态的生成webp的图片,而这个过程正好可以使用webpack loader来实现。
webp-loader的实现
var imagemin = ;var imageminWebp = ;var loaderUtils = ;module {thiscacheable && this;if !thisemitFile throw "emitFile is required from module system";var callback = this;var options = loaderUtils;// 写入原文件var url = loaderUtils;this;// 如果源文件比较小,则没必要转换为webp格式的图片,直接使用callback传递给下一个loader处理var limit;if optionslimitlimit = ;if limit <= 0 || contentlength < limitreturn;// 根据options内容生成webpOptionsvar webpOptions =preset: optionspreset || 'default'quality: optionsquality || 75alphaQuality: optionsalphaQuality || 100method: optionsmethod || 1sns: optionssns || 80autoFilter: optionsautoFilter || falsesharpness: optionssharpness || 0lossless: optionslossless || false;if optionssizewebpOptionssize = optionssize;if optionsfilterwebpOptionsfilter = optionsfilter;// 生成的webp图片的名称为原图片的名称后面追加.webp,// 例如:xxx.jpg.webp, 方便在css预处理器中的使用var webpUrl = url + '.webp';// 原图片异步转换为webp的图片imagemin;};// 要求webpack传入原始的buffer,方便处理图片moduleexportsraw = true;
注意事项
目前缩写的webp-loader
还不能独立的使用,因为并没有导出合法的JavaScript模块,后面继续讲解svg-placeholder
处理方案。