Webpack3之雪碧圖外掛（WEBPACK-SPRITESMITH配置簡述）

qq20004604發表於2018-01-15
WebMIT

WEBPACK-SPRITESMITH配置簡述

前注：

文件全文請檢視 根目錄的文件說明。

如果可以，請給本專案加【Star】和【Fork】持續關注。

有疑義請點選這裡，發【Issues】。

DEMO

0、使用說明

安裝：

npm install
複製程式碼

執行：

// 開發模式（推薦使用這個）
npm run dev

// 打包到dist目錄
npm run build
複製程式碼

單獨安裝 webpack-spritesmith：（由於有雪碧圖，所以記得，至少要有 file-loader）

npm i --save webpack-spritesmith
複製程式碼

1、概述

webpack-spritesmith 簡單來說，就是把小圖片拼成雪碧圖，然後通過 css 類引入（再也不需要你自己寫雪碧圖的css，和在ps裡面拼雪碧圖了）。

我們之前用 url-loader 來將圖片轉base64字串，這是另外一種解決方案，據說雪碧圖的效能更好一些。

使用說明：

  1. 將小圖片放到某一個資料夾；
  2. 通過配置拿到這個資料夾下，字尾名符合要求（自己配置）的所有圖片；
  3. 自動生成雪碧圖和 css 檔案，並插入到配置好的資料夾內；
  4. css 檔案自動引入了雪碧圖（需要自行配置相對路徑）；
  5. 使用者引入 css 檔案，然後使用指定類即可；

2、配置

【這裡不是英文文件的直接翻譯】，示例參照DEMO

1、src 簡單來說，這個屬性用於配置你從哪裡捕獲這些小圖片。這就意味著，你需要把加入雪碧圖的圖片，單獨放到某一個資料夾。

cwd 
必填
就是小圖片所在的目錄啦，注意，不會遞迴子目錄（即子目錄裡的會被無視）

glob 
必填
型別是字串，語法是glob語法（類似正則語法），有點像loader匹配符合要求的檔名。
複製程式碼

2、target 輸出檔案的配置

image 
必填
把雪碧圖輸出到哪（需要帶檔名）（注意這裡不是指打包後，而是指打包前，實際打包還是被url-loader處理的）

css 
必填
輸出的css檔案，可以是字串、或者陣列（如果是陣列的話，輸出多個同樣的檔案）
複製程式碼

3、apiOptions 配置屬性

generateSpriteName 
可選，
是一個函式，有一個引數（是檔案的絕對路徑，字串），預設值是返回檔名（不含字尾和路徑）。
這個用於命名類名，預設是檔名作為類名

cssImageRef 
必填，
生成的圖片在 API 中被引用的路徑。
簡單來說，就是你上面輸出了 image 和 css ，那麼在 css 用什麼樣的路徑書寫方式來引用 image 圖片（可以是別名，或相對路徑）

handlebarsHelpers 
可選
是一個物件，並且是全域性的（意味著後面的本外掛的這個配置會覆蓋前面的配置）。
給 handlebars 用的，沒搞懂，但一般用不上。
複製程式碼

4、spritesmithOptions 可選，配置 spritesmith 用的。裡面可以定製比如雪碧圖的排列方向。

5、retina 可選，retina 屏的配置。略略略。

關於解決 retina 屏的雪碧圖的問題，可以參考這個 Retina屏下的CSS雪碧圖，所以最好給 spritesmithOptions.padding 屬性賦值 2。

這個屬性用於圖片放大縮小。

6、customTemplates

可選，

這個應該是指使用者自定義 css 模板，

官方參考模板是：/node_modules/spritesheet-templates/lib/templates/css.template.handlebars這個檔案。

3、問題答疑

【問題一】為什麼每個類名都以.icon-開頭？

【答】因為其使用的是 handlebars 模板 node_modules/spritesheet-templates/lib/templates/css.template.js

然後模板中 selector 的值是被 node_modules/spritesheet-templates/lib/templates/css.template.js 處理過的。

【問題二】我如何更改雪碧圖的 css 模板？

【答】參考問題一中，給的 css 模板，然後自己在 customTemplates 去修改。

相關文章