189 8069 5689
这篇文章给大家介绍如何在Webpack中使用雪碧图插件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
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 and spritesheet-templates ，于是进入 spritesmith 插件中查阅，发现果然有关于边距问题的描述和解决方法 spritesmith: padding。
可是在 webpack-spritesmith 又该怎么使用呢？
查阅 webpack-spritesmith 源代码和文档，发现：spritesmithOptions - optional. Options for spritesmith
好的，就是你啦！然后在 webpack 配置文件中，增加 padding 属性，这里单位为 px：
plugins: [
// 雪碧图设置
new SpritesmithPlugin({
// ... 省略其他配置
// 核心组件配置
spritesmithOptions: {
padding: 4,
}
})
],关于如何在Webpack中使用雪碧图插件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。