Webpack中雪碧图插件使用详解
背景
在开发过程中，我们需要用到很多图标，这些图标的大小不是很大，但是每次需要向服务器发送请求，从而加重服务器的负担，尤其是当网站处于高访问量的情况下或网络不稳定的时候，服务器性能会明显下降。这种情况不符合被广泛遵循的雅虎军规“尽量减少HTTP请求数”的要求（雅虎前端优化的35条军规）。
为了避免这种情况，我们需要使用到雪碧图将这些图标整合到一张图片上，再使用CSS背景及其定位，将需要显示的图标移动到元素背景中。
传统方式，我们需要将图标拼接到一张图片上，计算好位置信息，这种方式维护起来比较麻烦。自从有了打包工具grunt、gulp和webpack之后，这一切似乎容易了许多。这里我重点介绍webpack雪碧图插件webpack-spritesmith的使用。
雪碧图插件webpack-spritesmith详解
本人是在vue-cli中增加了该雪碧图插件，关键步骤如下，细节上以vue-cli为背景，其他框架类似配置。
1.安装配置
首先在项目中按照官方说明install之后，在bulid/webpack.base.conf.js中进行如下配置。需要说明的是，雪碧图是开发模式和生产模式都要使用的功能，因此我们在webpack的基础配置中进行设置。
1.1首先引入插件constSpritesmithPlugin=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:[
//雪碧图设置
newSpritesmithPlugin({
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，该函数基本参考了官方示例。由于本人使用的是二倍图，所以此处使用了图片缩放和垂直居中的方式。大家选择参考：
consttemplateFunction=function(data){
//console.log(data.sprites);
constshared='.w-icon{background-image:url(I);}'
.replace('I',data.sprites[0].image);
//注意：此处默认图标使用的是二倍图
constperSprite=data.sprites.map(function(sprite){
//background-size:SWpxSHpx;
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:XpxYpx;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');
returnshared+'\n'+perSprite;
};
其实关键之处就是利用定制函数，将参数中每个图标的信息用来进行样式的定制。这些信息中包括图标名、宽高和在雪碧图中的位置信息等。
当然我们也可以将目标生成成less文件，然后再进行使用（示例代码中注释部分）。但本人发现会生成大量变量，而这些变量我们并不经常使用，所以本人没有采用这种方式。
2.使用方法
进行完上述配置之后，再在我们配置的源文件夹中添加我们需要处理的图标。然后启动vue-cli的开发者模式npmrunstart（其他框架，运行对应命令）。
启动完成之后，我们可以发现在目标目录下生成了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，从而出现上述问题，瞬间恍然大悟。
于是仔细翻阅官方说明，其中提到核心组件是spritesmithandspritesheet-templates，于是进入spritesmith插件中查阅，发现果然有关于边距问题的描述和解决方法spritesmith:padding。
可是在webpack-spritesmith又该怎么使用呢？
查阅webpack-spritesmith源代码和文档，发现：spritesmithOptions-optional.Optionsforspritesmith
好的，就是你啦！然后在webpack配置文件中，增加padding属性，这里单位为px：
plugins:[
//雪碧图设置
newSpritesmithPlugin({
//...省略其他配置
//核心组件配置
spritesmithOptions:{
padding:4,
}
})
],
重新启动项目编译，打开雪碧图和样式，发现图标之间有间隙了，且放大页面后，图标边缘也没有出现白线问题。好了，搞定！
总结
有了这个插件之后，我们就可以在配置目录下动态添加图标，此时webpack会立即重新编译生成新的雪碧图和对应样式，这样我们就可以在页面上立刻使用对应图标，再也不用担心自己设置的background-position有不对的地方了。好了，HaveFun!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。