webpack使用雪碧图插件

1.先安装插件

npm install --save-dev webpack-spritesmith

2.配置webpack

配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith');

在webpack.config.js的插件里面写（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.打包 npm run build  然后你就会看到生成的png和css

4.页面上引入你生成的css就行了
vue中单页面直接在style里面引入就行了，然后直接用
eg：<i class="icon-u2360"></i>