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>