雪碧图也叫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，如：

<link rel="stylesheet" type="text/css" href="./dist/sprites/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,效果如下：