1.我的文件目录：
// 在上个实例项目上增加了icons文件夹；
// dist/sprites/目录是后面执行webpack打包命令自动生成的，先不用管；
1、安装webpack-spritesmith；
npm install --save-dev webpack-spritesmith
2、webpack.config.js添加如下代码：
var SpritesmithPlugin = require('webpack-spritesmith');
plugins: [
new SpritesmithPlugin({
// 目标小图标
src: {
//下面的路径，根据自己的实际路径配置
cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
glob: '*.png'
},
// 输出雪碧图文件及样式文件
target: {//下面的路径，根据自己的实际路径配置
image: path.resolve(__dirname, './dist/sprites/sprite.png'),
css: path.resolve(__dirname, './dist/sprites/sprite.css')
},
// 样式文件中调用雪碧图地址写法
apiOptions: {// 这个路径根据自己页面配置
cssImageRef: '../sprites/sprite.png'
},
spritesmithOptions: {
algorithm: 'top-down'
}
})
]
3.执行webpack打包指令,执行后打包生成dist/sprites/文件 cnpm run build
我执行的时候，提示：找不到这个模板，如果你也报这个错，安装下就行
cnpm install globule --save-dev
4.在main.js中引入 import './assets/sprites/sprite.css'
5.vue页面中用这些图标代码：----样式代码已经自动生成
