1.我的文件目錄：
// 在上個實例項目上增加了icons文件夾；
// dist/sprites/目錄是后面執(zhí)行webpack打包命令自動生成的，先不用管；
1、安裝webpack-spritesmith；
npm install --save-dev?webpack-spritesmith
2、webpack.config.js添加如下代碼：
var SpritesmithPlugin = require('webpack-spritesmith');
? plugins: [
? ? ? ? new SpritesmithPlugin({
? ? ? ? ? ? // 目標小圖標? ? ? ? ? ??
? ??????????src: {
? ? ? ?? ???????//下面的路徑，根據(jù)自己的實際路徑配置
? ? ? ? ? ? ? ? cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
? ? ? ? ? ? ? ? glob: '*.png'? ? ? ? ? ??
? ??????????},
? ? ? ? ? ? // 輸出雪碧圖文件及樣式文件? ? ? ? ? ??
? ??????????target: {//下面的路徑，根據(jù)自己的實際路徑配置
? ? ? ? ? ? ? ? image: path.resolve(__dirname, './dist/sprites/sprite.png'),
? ? ? ? ? ? ? ? css: path.resolve(__dirname, './dist/sprites/sprite.css')
? ? ? ? ? ? },
? ? ? ? ? ? // 樣式文件中調(diào)用雪碧圖地址寫法? ? ? ? ? ??
? ??????????apiOptions: {// 這個路徑根據(jù)自己頁面配置? ? ? ? ? ?
? ? ? ? ? ? ? ? cssImageRef: '../sprites/sprite.png'?
?? ??????????},
? ? ? ? ? ? spritesmithOptions: {
? ? ? ? ? ? ? ? algorithm: 'top-down'? ? ? ? ? ??
? ??????????}
? ? ? ? })
? ? ]
3.執(zhí)行webpack打包指令,執(zhí)行后打包生成dist/sprites/文件? ? ? cnpm run build
? 我執(zhí)行的時候，提示：找不到這個模板，如果你也報這個錯，安裝下就行
? ? cnpm install globule --save-dev? ? ? ?
4.在main.js中引入? ? import './assets/sprites/sprite.css'
5.vue頁面中用這些圖標代碼：----樣式代碼已經(jīng)自動生成
