Webpack3之雪碧圖插件（WEBPACK-SPRITESMITH配置簡述）

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
複製代碼

一、概述

webpack-spritesmith 簡單來講，就是把小圖片拼成雪碧圖，而後經過 css 類引入（不再須要你本身寫雪碧圖的css，和在ps裏面拼雪碧圖了）。

咱們以前用 url-loader 來將圖片轉base64字符串，這是另一種解決方案，聽說雪碧圖的性能更好一些。

使用說明：

1. 將小圖片放到某一個文件夾；
2. 經過配置拿到這個文件夾下，後綴名符合要求（本身配置）的全部圖片；
3. 自動生成雪碧圖和 css 文件，並插入到配置好的文件夾內；
4. css 文件自動引入了雪碧圖（須要自行配置相對路徑）；
5. 用戶引入 css 文件，而後使用指定類便可；

二、配置

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

一、src 簡單來講，這個屬性用於配置你從哪裏捕獲這些小圖片。這就意味着，你須要把加入雪碧圖的圖片，單獨放到某一個文件夾。

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

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

二、target 輸出文件的配置

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

css 
必填
輸出的css文件，能夠是字符串、或者數組（若是是數組的話，輸出多個一樣的文件）
複製代碼

三、apiOptions 配置屬性

generateSpriteName 
可選，
是一個函數，有一個參數（是文件的絕對路徑，字符串），默認值是返回文件名（不含後綴和路徑）。
這個用於命名類名，默認是文件名做爲類名

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

handlebarsHelpers 
可選
是一個對象，而且是全局的（意味着後面的本插件的這個配置會覆蓋前面的配置）。
給 handlebars 用的，沒搞懂，但通常用不上。
複製代碼

四、spritesmithOptions 可選，配置 spritesmith 用的。裏面能夠定製好比雪碧圖的排列方向。

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

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

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

六、customTemplates

可選，

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

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

三、問題答疑

【問題一】爲何每一個類名都以.icon-開頭？

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

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

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

【答】參考問題一中，給的 css 模板，而後本身在 customTemplates 去修改。