作為前端構建工具不可或缺的一個環(huán)節(jié)，自動生成css sprites圖片不僅僅能夠減少頻繁的人工操作，還能夠避免多人協(xié)作時對同一個sprites圖片維護過程中因個人原因引起的圖片不規(guī)范問題。58到家前端工程化解決方案boi的自動css sprites功能基于webpack實現(xiàn)，本文記錄一下實現(xiàn)方案的各個細節(jié)以及需要注意的地方。
1. 功能需求
css sprites的功能需求簡單說就是將style中引用的散列小圖標合并成一張sprites圖片。從功能角度來講比較單一，從實現(xiàn)角度來講需要具備以下幾點：
- 對style文件進行資源依賴分析，能夠得出style中引用的圖片資源；
- style文件引用的圖片并非都是圖標，其他的比如背景圖等資源不應該被sprites合并。所以必須有明確的標識可以區(qū)分圖標與非圖標資源。
對于第一點，webpack本身就具備依賴分析的功能，所以無需自行實現(xiàn)。那么如何設計明確的標識以便區(qū)分資源類型呢？
2. 用戶至上的設計原則
上文提到的資源標識，我們首先看一下業(yè)內的同類產(chǎn)品是如何實現(xiàn)的。以fis為例，請看以下代碼：
li.list-1::before { background-image: url('./img/list-1.png?__sprite'); } li.list-2::before {
