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>