Webpack中雪碧图插件使用详解

背景 在开发过程中，我们需要用到很多图标，这些图标的大小不是很大，但是每次需要向服务器发送请求，从而加重服务器的负担，尤其是当网站处于高访问量的情况下或网络不稳定的时候，服务器性能会明显下降。这种情况不符合被广泛遵循的雅虎军规“尽量减少HTTP请求数”的要求（雅虎前端优化的35条军规）。 为了避免这种情况，我们需要使用到雪碧图将这些图标整合到一张图片上，再使用CSS背景及其定位，将需要显示的图标移动到元素背景中。 传统方式，我们需要将图标拼接到一张图片上，计算好位置信息，这种方式维护起来比较麻烦。自从有了打包工具grunt、gulp和webpack之后，这一切似乎容易了许多。这里我重点介