vue-cli3使用webpack-spritesmith配置雪碧圖

1、背景問題

項目中若是有大量的小圖標，若是不使用阿里的iconfont。UI給一個加一個，加一個引用一個，每一個圖標雖然很小，可是也是一次請求，每次請求都是消耗性能資源的.

2、解決思路

使用webpack-spritesmith能夠將全部的icon小圖標整合成一張圖片。每次都只會請求一次，同時還能自動生成定位樣式，對於都是同尺寸的小圖標，直接可使用。

3、廢話少說，直接來code

一、我是使用vue-cli3配置這個webapck的插件的。若是使用cli2的網上也不少，自行查找

二、查閱資料：(npm官網 github的readme)

（1）https://www.npmjs.com/package/webpack-spritesmith

（2）https://github.com/mixtur/webpack-spritesmith

三、來來。配置走起。

（1）僞裝你的vue-cli3腳手架已經搭建起來了，在項目根目錄，新建一個vue.config.js的文件（webpack就是在這裏配置。cli3不建議修改webapck,可是若是須要修改，在這裏能夠覆蓋默認的配置）

（2）npm install webpack-spritesmith --save

（3）在vue.config.js裏面寫東西啊

const path = require('path') //引入node模塊，一會要操做文件，輸入，生成，輸出都須要這玩意。 const SpritesmithPlugin = require('webpack-spritesmith'); // 主角，必須引入。要否則咋用 /* 這裏是咱們本身修改的模板樣式，webpack，會自動生成一個sprite.css的樣式，有時候生成的不滿意， 咱們能夠在這裏修改，能夠本身打印一下 data裏面的參數，看着就會大概明白（先看下面的配置，最後看這個模板） */ var templateFunction = function (data) { var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width) .replace('H', data.spritesheet.height) var perSprite = data.sprites.map(function (sprite) { return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }' .replace('N', sprite.name) .replace('W', sprite.width) .replace('H', sprite.height) .replace('X', sprite.offset_x) .replace('Y', sprite.offset_y); }).join('\n'); return shared + '\n' + perSprite; }; // 全部的配置都在這個導出裏面 module.exports = { // webpack的配置入口能夠打印這個config。能夠看到webpack的配置項 configureWebpack: config => { /* 細節坑。文檔裏面寫着 須要resolve，引入圖片生成的位置， 不加這行會報錯。由於github，Readme裏面有這句話 resolve contains location of where generated image is （要把生成的地址resolve到modules裏面。不寫就錯） 必定要加，血的教訓啊 */ config.resolve.modules = ['node_modules', './src/assets/images'] // 定義一個插件數組。用來覆蓋，在裏面使用咱們的主角 const Plugins = [ new SpritesmithPlugin({ /* 目標小圖標，這裏就是你須要整合的小圖片的老巢。 如今是一個個的散兵，把他們位置找到，合成一個 */ src: { cwd: path.resolve(__dirname, './src/assets/icon'), glob: '*.png' }, // 輸出雪碧圖文件及樣式文件，這個是打包後，自動生成的雪碧圖和樣式，本身配置想生成去哪裏就去哪裏 target: { image: path.resolve(__dirname, './src/assets/images/sprite.png'), css: [ [path.resolve(__dirname, './src/assets/css/sprite.scss'), { // 引用本身的模板 format: 'function_based_template' }], ] }, // 自定義模板入口，咱們須要基本的修改webapck生成的樣式，上面的大函數就是咱們修改的模板 customTemplates: { 'function_based_template': templateFunction, }, // 樣式文件中調用雪碧圖地址寫法（Readme這麼寫的） apiOptions: { cssImageRef: '~sprite.png' }, // 讓合成的每一個圖片有必定的距離，不然就會緊挨着，很差使用 spritesmithOptions: { padding: 20 } }) ] // config裏面，覆蓋掉之前的，要否則很差使 config.plugins = [...config.plugins, ...Plugins] } } 

4、組件裏面怎麼使用

1.根據你的配置。從新npm run serve之後。會在你配置的文件 裏面生成合成圖sprite.png 和 sprite.css(或者其餘格式)

2.在sprite.css裏面已經經過webpack的機制，引入了sprite.png,因此組件裏面直接在style部分直接@import'../xx/sprite/.css'就能夠了

3.根據模板的要求，咱們在html使用

<span class="icon icon-每一個小圖的名字"></sapn> 

5、幾個問題

1.css模板配置（就是最上面的大函數），webapck本身官方代碼 全是最基礎的。沒有background-size的設置，這樣生成的圖大小是沒有規定尺寸的。因此引用顯示會頗有問題 。因此我在後邊加了replace('W', data.spritesheet.width) .replace('H', data.spritesheet.height)

var templateFunction = function (data) { var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image) .replace('W', data.spritesheet.width) .replace('H', data.spritesheet.height) 

這樣這個合成的大圖尺寸就固定了，小圖定位就很準確， 裏面全部不清楚的參數，打印data，看一下就明白了

2.這句代碼。在cli2 裏面很好找，cli3裏面由於我對webpack的把不熟悉，打印了config才找到，才加上。找不到的配置，就打印config，

config.resolve.modules = ['node_modules', './src/assets/images'] 

3.在組建裏面使用，前兩個是固定寫法，不然不生效，最後能夠繼續定義樣式名，修改樣式

<span class="icon icon-小圖名字 自定義名字"></span>