雪碧图也叫CSS精灵， 是一CSS图像合成技术，这里介绍webpack实现雪碧图

这是我的文件目录：

// 在上个实例项目上增加了icons文件夹；

// dist/sprites/目录是后面执行webpack打包命令自动生成的，先不用管；

1、安装webpack-spritesmith；

npm install --save-dev webpack-spritesmith

2、webpack.config.js添加如下代码：

var SpritesmithPlugin = require('webpack-spritesmith');

//module.exports = {//代码}

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/文件(或者上一篇文章写的npm run build指令)

webpack

4、index.html文件中引入sprite.css，如：

5、App.vue中通过class引用小图标，如：(具体图标class进入sprite.css查看)

i标签是行内元素，可以添加css为i.icon{display:inline-block}

6、执行命令webpack-dev-server，生产链接浏览器打开(或者上一篇文章写的npm run dev)

webpack-dev-server

ok,效果如下：