webpack雪碧圖生成

騰訊DeepOcean發表於2018-11-16

Web

騰訊DeepOcean原創文章：dopro.io/webpack-spr…

前言

在HTTP/2.0還沒有普及的現在，css sprite(雪碧圖)仍是前端工程化中必備的一環，而隨著webpack應用的普及，構建工具切換到webpack後雪碧圖該如何處理呢？

目標

先說下我們希望達到的效果。

1、需要合成的雪碧圖icon統一放在src / assets / sprite資料夾下

2、在src / img 會生成一份以上級目錄名稱命名的雪碧圖，如icon資料夾中用到的圖示拼合成icon.png

3、雪碧圖從上到下的方式排列，並且每個圖示間隔20px，如圖所示

4、在sass中編寫，按需合併。

5、編譯後得到的樣式如下,包括width、height也一同輸出

常見方案

目前主要的解決方案有兩種

一種是以webpack-spritesmith、postcss-sprites為代表的外掛，webpack-spritesmith主要的執行方式是會預先把sprite目錄中的圖示拼合好，頁面主要依賴生成後的雪碧圖。而postcss-sprites則是通過對已經生成的 CSS 檔案進行分析，將其中的 background 或 background-image 作為依賴收集，合併成雪碧圖後再將相關引數替換。

第二種是loader處理方式，不過網上基本上沒有很好的方案，比如說這種

這種通過註釋的方式來識別並不是很好。

目前市面上的方案都不能滿足我們的個性化要求，相對於外掛針對某一資料夾/檔案處理方式，我們更希望採用loader鏈式處理的方式來實現。

解決方案

採用loader的話只能通過新增標記的方式告知需要合成，比如在background url加上“?_sprite”，然後利用正則獲取圖片路徑，給到相關的庫去合成。

這裡主要利用spritesmith開源專案來進行開發，spritesmith很強大，它可以比較靈活的合成雪碧圖，通過相應的API可以獲得圖示的相關資訊。

其中sprites是需要被合成的圖片路徑，裡面包含了圖示的絕對路徑

Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20 }, function handleResult (err, result) {
if(err) {
throw err;
}
});

另外還提供了多種排列的規則,以及可以設定圖片間的間距

Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20 }, function handleResult (err, result) {
if(err) {
throw err;
}
});

列印result可以看到返回的資料主要包括圖片的絕對路徑，座標、寬高以及雪碧圖的Buffer

利用這些資訊我們可以對返回的樣式進行重新處理，滿足前面第5點的樣式要求

let imageW = image.width;
let imageH = image.height;
if(mobile){
imageW = imageW/2;
imageH = imageH/2;
}
let imgWidth = 'width:' + imageW + 'px; ';
let imgHeight = 'height:' + imageH + 'px; ';
if(i < afterContent.length) {
if(afterContent[i] == '; ') {
end = i + 1;
afterContent = afterContent.substring(0, end) + backgroundSize+ imgWidth+ '\n' + imgHeight + afterContent.substring(end);
} else {
end = i;
afterContent = afterContent.substring(0, end) + '; \n' + backgroundSize +imgWidth+ '\n' + imgHeight+ afterContent.substring(end);
}
}
let imagePosX = image.x;
let imagePosY = image.y;
if(mobile){
imagePosX = imagePosX/2;
imagePosY = imagePosY/2;
}
let imageX = image.x == 0 ? ' 0' : ' -' + imagePosX + 'px';
let imageY = image.y == 0 ? ' 0' : ' -' + imagePosY + 'px';
let imagePosition = '';
if(image.x || image.y){
imagePosition = imageX + imageY;
}
let cssVal = 'url("' + spriteRelativePath + '")' + imagePosition;