第 08 课：自动生成雪碧图

背景

在开发过程中，可能存在大量的小图片和小图标，虽然每张图的尺寸不大，但每次都需要发起一次 HTTP 请求，从性能优化的角度来说是不合理的。常见的做法是我们将多个小图片拼成一张大图（前端界叫做雪碧图或 CSS Sprite），然后通过 CSS 的 background-position 来控制图片的展示，这样可以极大减少 HTTP 请求次数。我们可以手动拼装雪碧图，但这样效率实在太低。本节课程将介绍如何在项目中通过自动化的方式生成雪碧图。

1 雪碧图生成的方式

目前常用的自动化方式有两种。

一种是预处理的方式，通过 webpack-spritesmith 提前将图片合成雪碧图，并生成对应的样式文件。其优点是所有的样式数据已经帮开发者生成好，开发者只需要引入样式即可，使用起来非常方便。缺点是所有的图片都合并到一个大图中，页面间有耦合。

另一种是后处理的方式。通过 postcss-sprite 对 CSS 文件进行分析，将 CSS 中包含的图片收集后合并成雪碧图再替换 CSS 中的代码。其优点是 CSS 中有哪些图片就合并哪些，不会把没用到的图片也合并进去。一张 CSS 样式表对应一张雪碧图。缺点是开发者需要手动去测量每张小图的尺寸。

两种方式各有所长，本教程中将选用预处理的方式生成雪碧图。

2 安装 webpack-spritesmith

首先本地安装开发依赖 webpack-spritesmith：

npm install -D webpack-spritesmith

3 配置

安装完成后，更新 webpack.config.js：

//...省略其他代码
const SpritesmithPlugin = requir