自己写一个webpack的loader

2024-08-25

雪碧图作为一种之前经常用来做图片性能优化的方案，其缺点也比较明显，就是需要手动标明图片的大小和位置，而且需要手动合并雪碧图。对 UI 和开发人员来说，这样的操作非常繁琐。
所以，我们需要一个工具来帮助我们自动生成雪碧图，并且能够自动合并雪碧图。

在项目中的 webpack.config.js 中添加如下配置：

...
module: {
  rules:[{
  test: /\.css$/,
  use:[
    path.resolve('./loader/index')
  ]
}]
}

将本地自定义的 loader 引入到 webpack 中，然后在 loader/index.js 中实现对图片的处理。

loader 就像一个函数，接受文件内容作为参数，返回处理后的内容或者用 fs 将处理后的内容写入到文件中。

实现一个把图片处理成雪碧图的 loader 思路：

收集需要处理的图片
借助 spritesmith，参数为收集到的图片，回调函数中返回雪碧图的内容和雪碧图的位置信息
spritesmith 的用法：

var sprites = ['fork.png', 'github.png', 'twitter.png'];
Spritesmith.run({src: sprites}, function handleResult (err, result) {
  result.image; // Buffer representation of image
  result.coordinates; // Object mapping filename to {x, y, width, height} of image
  result.properties; // Object with metadata about spritesheet {width, height}
});

将雪碧图的内容通过 fs 写入到文件中
使用 postcss-value-parser (将 CSS 声明值和规则参数转换为节点树，并提供简单的遍历 API) 解析 CSS 内容，找到所有的背景图片，替换为雪碧图的 URL
用 callback 函数将处理后的内容返回给 webpack

如果是单个处理结果，可以在同步模式中直接返回。如果有多个处理结果，则必须调用 this.callback()。在异步模式中，必须调用 this.async() 来告知 loader runner 等待异步结果，它会返回 this.callback() 回调函数。随后 loader 必须返回 undefined 并且调用该回调函数。

官方文档中的 loader 相关内容 https://webpack.docschina.org/loaders/

如果需要 options
options 里就是传入 loader 的配置参数，下面看看如何在 loader 中使用。
获取方法 1：需要引入”loader-utils”库,使用 loaderUtils.getOptions()获取
获取方法 2：直接使用 this.getOptions()方法也可