vue-cli3使用webpack-spritesmith配置雪碧图
一、背景问题
项目中如果有大量的小图标，如果不使用阿里的iconfont。UI给一个加一个，加一个引用一个，每个图标虽然很小，但是也是一次请求，每次请求都是消耗性能资源的.
二、解决思路
使用webpack-spritesmith可以将所有的icon小图标整合成一张图片。每次都只会请求一次，同时还能自动生成定位样式，对于都是同尺寸的小图标，直接可以使用。
三、废话少说，直接来code
1、我是使用vue-cli3配置这个webapck的插件的。如果使用cli2的网上也很多，自行查找
2、查阅资料：(npm官网 github的readme)
3、来来。配置走起。
（1）假装你的vue-cli3脚手架已经搭建起来了，在项目根目录，新建一个vue.config.js的文件（webpack就是在这里配置。cli3不建议修改webapck,但是如果需要修改，在这里可以覆盖默认的配置）
（2）npm install webpack-spritesmith --save
（3）在vue.config.js里面写东西啊
const path = require('path') //引入node模块，一会要操作文件，输入，生成，输出都需要这玩意。
const SpritesmithPlugin = require('webpack-spritesmith'); // 主角，必须引入。要不然咋用
/* 这里是我们自己修改的模板样式，webpack，会自动生成一个sprite.css的样式，有时候生成的不满意，
我们可以在这里修改，可以自己打印一下 data里面的参数，看着就会大概明白（先看下面的配置，最后看这个模板）
*/
var templateFunction = function (data) {
var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width)
.replace('H', data.spritesheet.height)
var perSprite = data.sprites.map(function (sprite) {
return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
.replace('N', sprite.name)
.replace('W', sprite.width)
.replace('H', sprite.height)
.replace('X', sprite.offset_x)
.replace('Y', sprite.offset_y);
}).join('\n');
return shared + '\n' + perSprite;
};
// 所有的配置都在这个导出里面
module.exports = {
// webpack的配置入口可以打印这个config。可以看到webpack的配置项
configureWebpack: config => {
/*
细节坑。文档里面写着 需要resolve，引入图片生成的位置，
不加这行会报错。因为github，Readme里面有这句话
resolve contains location of where generated image is
（要把生成的地址resolve到modules里面。不写就错）
一定要加，血的教训啊
*/
config.resolve.modules = ['node_modules', './src/assets/images']
// 定义一个插件数组。用来覆盖，在里面使用我们的主角
const Plugins = [
new SpritesmithPlugin({
/*
目标小图标，这里就是你需要整合的小图片的老巢。
现在是一个个的散兵，把他们位置找到，合成一个
*/
src: {
cwd: path.resolve(__dirname, './src/assets/icon'),
glob: '*.png'
},
// 输出雪碧图文件及样式文件，这个是打包后，自动生成的雪碧图和样式，自己配置想生成去哪里就去哪里
target: {
image: path.resolve(__dirname, './src/assets/images/sprite.png'),
css: [
[path.resolve(__dirname, './src/assets/css/sprite.scss'), {
// 引用自己的模板
format: 'function_based_template'
}],
]
},
// 自定义模板入口，我们需要基本的修改webapck生成的样式，上面的大函数就是我们修改的模板
customTemplates: {
'function_based_template': templateFunction,
},
// 样式文件中调用雪碧图地址写法（Readme这么写的）
apiOptions: {
cssImageRef: '~sprite.png'
},
// 让合成的每个图片有一定的距离，否则就会紧挨着，不好使用
spritesmithOptions: {
padding: 20
}
})
]
// config里面，覆盖掉以前的，要不然不好使
config.plugins = [...config.plugins, ...Plugins]
}
}
四、组件里面怎么使用
1.根据你的配置。重新npm run serve以后。会在你配置的文件 里面生成合成图sprite.png 和 sprite.css(或者其他格式)
2.在sprite.css里面已经通过webpack的机制，引入了sprite.png,所以组件里面直接在style部分直接@import'../xx/sprite/.css'就可以了
3.根据模板的要求，我们在html使用
<span class="icon icon-每个小图的名字"></sapn>
五、几个问题
1.css模板配置（就是最上面的大函数），webapck自己官方代码 全是最基础的。没有background-size的设置，这样生成的图大小是没有规定尺寸的。所以引用显示会很有问题 。所以我在后边加了replace('W', data.spritesheet.width) .replace('H', data.spritesheet.height)
var templateFunction = function (data) {
var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image)
.replace('W', data.spritesheet.width)
.replace('H', data.spritesheet.height)
这样这个合成的大图尺寸就固定了，小图定位就很准确， 里面所有不清楚的参数，打印data，看一下就明白了
2.这句代码。在cli2 里面很好找，cli3里面因为我对webpack的把不熟悉，打印了config才找到，才加上。找不到的配置，就打印config，
config.resolve.modules = ['node_modules', './src/assets/images']
3.在组建里面使用，前两个是固定写法，否则不生效，最后可以继续定义样式名，修改样式
<span class="icon icon-小图名字 自定义名字"></span>
