Webpack雪碧图插件webpack-spritesmith配置与问题排查指南

Webpack雪碧图插件配置与问题排查

背景

开发中需处理大量小图标，若单独向服务器请求会加重服务器负担，特别是在高访问量或网络不稳定时，服务器性能显著下降。这违背了雅虎前端优化的35条军规中“尽量减少HTTP请求数”的原则。

为解决此问题，需使用雪碧图将多个图标合并为一张图片，并通过CSS背景定位技术，将特定图标映射到对应元素背景中。

传统方式需手动拼接图标并计算位置，维护复杂。借助grunt、gulp和webpack等打包工具后流程简化。本文重点介绍webpack雪碧图插件webpack-spritesmith的使用。

雪碧图插件 webpack-spritesmith 详解

本文以vue-cli环境为例增加该插件，关键步骤如下，其他框架配置类似。

1. 安装配置

首先按官方说明install ，然后在 bulid/webpack.base.conf.js 中进行配置。因雪碧图需同时用于开发和生产环境，故设置于webpack基础配置中。

1.1 首先引入插件 const SpritesmithPlugin = require('webpack-spritesmith');；

1.2 其次在 module.rules 中注释掉png图标的默认配置，防止url-loader将其编译为行内图片，并单独设置png图标配置，如下：


{
 // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 注释掉原有配置，去掉对png图标的匹配
 test: /\.(jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
},
// 对图标单独设置，以便生成雪碧图
{
 test: /\.png$/,
 loaders: [
  'file-loader' // 使用 file-loader 对 png 图标进行设置
 ]
},

1.3 接着在webpack配置对象的plugins属性（若无则自行创建）中添加雪碧图处理。基本配置如下：


plugins: [
 // 雪碧图设置
 new SpritesmithPlugin({
  src: {
   cwd: path.resolve(__dirname, '../src/assets/images/icons/'), // 图标根路径
   glob: '**/*.png' // 匹配任意 png 图标
  },
  target: {
   image: path.resolve(__dirname, '../src/assets/css/sprites-generated.png'), // 生成雪碧图目标路径与名称
   // 设置生成CSS背景及其定位的文件或方式
   css: [
    [path.resolve(__dirname, '../src/assets/css/sprites-generated.css'), {
     format: 'function_based_template'
    }]
   ]
   // css: path.resolve(__dirname, '../src/assets/spritesmith-generated/sprite.less')
  },
  customTemplates: {
   'function_based_template': templateFunction,
  },
  apiOptions: {
   cssImageRef: "./sprites-generated.png", // css文件中引用雪碧图的相对位置路径配置
  },
 })
],

此处采用CSS定制方式，即在 target.css 中配置对应的format函数名 function_based_template（注意数组层级关系，避免配错）。然后在 customTemplates 中配置对应名称的属性名。

此处引用了自定义函数 templateFunction，该函数参考官方示例。因使用二倍图，故采用图片缩放和垂直居中方式。供参考：


const templateFunction = function (data) {
 // console.log(data.sprites);
 const shared = '.w-icon { background-image: url(I); }'
   .replace('I', data.sprites[0].image);
 // 注意：此处默认图标使用的是二倍图
 const perSprite = data.sprites.map(function (sprite) {
  // background-size: SWpx SHpx;
  return '.w-icon-N { width: SWpx; height: SHpx; }\n.w-icon-N .w-icon, .w-icon-N.w-icon { width: Wpx; height: Hpx; background-position: Xpx Ypx; margin-top: -SHpx; margin-left: -SWpx; } '
   .replace(/N/g, sprite.name)
   .replace(/SW/g, sprite.width / 2)
   .replace(/SH/g, sprite.height / 2)
   .replace(/W/g, sprite.width)
   .replace(/H/g, sprite.height)
   .replace(/X/g, sprite.offset_x)
   .replace(/Y/g, sprite.offset_y);
 }).join('\n');

 return shared + '\n' + perSprite;
};

关键在于利用定制函数，根据参数中每个图标的信息（包括图标名、宽高及在雪碧图中的位置等）进行样式定制。

也可将目标生成为less文件再使用（示例代码注释部分）。但因生成大量不常使用的变量，故未采用此方式。

2. 使用方法

完成上述配置后，在配置的源文件夹中添加需处理的图标。然后启动vue-cli开发者模式npm run start（其他框架运行对应命令）。

启动后，可在目标目录下发现生成的sprites-generated.png和sprites-generated.css两个文件。样式文件中形如：


.w-icon { background-image: url(./sprites-generated.png); }
.w-icon-apply { width: 25.5px; height: 27px; }
.w-icon-apply .w-icon, .w-icon-apply.w-icon { width: 51px; height: 54px; background-position: -208px -58px; margin-top: -27px; margin-left: -25.5px; }

接下来在使用组件中引用上述样式即可。

3.遇到的问题

3.1 放大页面时，部分雪碧图标边缘出现相邻图标边缘，导致白线，如何解决？

制作完成后提交UI审查，发现页面放大时图标旁出现白线。仔细检查发现，放大后部分图标周边出现线条，而未放大时无此现象。查看生成的雪碧图，发现图标间紧密排列无空隙，且部分计算结果含.5px，部分浏览器解析为1px，导致白线。查阅官方说明，核心组件为spritesmith和spritesheet-templates，进入spritesmith插件查阅，发现有关边距问题的描述及解决方法spritesmith: padding。

但在webpack-spritesmith中如何使用？

查阅webpack-spritesmith源代码和文档，发现：spritesmithOptions - optional. Options for spritesmith

确认无误后，在webpack配置文件中增加padding属性，单位为px：


 plugins: [
  // 雪碧图设置
  new SpritesmithPlugin({
   // ... 省略其他配置
   // 核心组件配置
   spritesmithOptions: {
    padding: 4,
   }
  })
 ],

重新启动项目编译，打开雪碧图和样式，发现图标间有间隙，且放大页面后图标边缘无白线问题。问题解决！

总结

使用该插件后，可在配置目录下动态添加图标，webpack会立即重新编译生成新雪碧图和对应样式，页面可立即使用对应图标，无需担心background-position设置错误。Have Fun!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

Webpack中雪碧图插件使用详解

Webpack雪碧图插件配置与问题排查

实用工具推荐