webpack雪碧圖生成

騰訊DeepOcean發表於2018-11-16
原文網址 : https://flycode.co/archives/51748
Web

原文連結：http://dopro.io/webpack-sprites.html

前言

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

目標

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

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

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

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

webpack雪碧圖生成
4、在sass中編寫，按需合併。

webpack雪碧圖生成
5、編譯後得到的樣式如下,包括width、height也一同輸出

webpack雪碧圖生成

常見方案

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

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

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

webpack雪碧圖生成
這種通過註釋的方式來識別並不是很好。

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

解決方案

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

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

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

var Spritesmith = require('spritesmith');
Spritesmith.run({src: sprites}, function handleResult (err, result) {
/* ... */
});
複製程式碼

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

webpack雪碧圖生成

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

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

webpack雪碧圖生成
利用這些資訊我們可以對返回的樣式進行重新處理，滿足前面第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;
複製程式碼

一般專案中的h5採用的都是雙倍圖，這裡可以增加個判斷，如果h5的話則width、height、background-size都減半處理

module:{
      rules:[
          {
              test:/\.(scss|css)$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                publicPath: '../../', 
                use: [{
                  loader:'css-loader'
                },{
                  loader:'isprite-loader',
                  options:{
                    outputPath:'./src/assets/img/',
                    mobile:true
                  }
                },{
                  loader:'sass-loader'
                }],
              })
          },
      ]
}
複製程式碼

最後

到這裡已經基本能達到預期的效果，不過仍有些問題沒有處理好，比如每次都會生成雪碧圖，這對於編譯速度會有一定的影響，針對這種問題，可以採用hash值進行對比，如果檔案沒有改動的話則不處理。

每一個業務都有不同的需求場景，這種方式可能不一定適用於所有專案，希望對大家有所幫助。

附上demo (https://github.com/Klchan-me/srpite)

歡迎關注“騰訊DeepOcean”微信公眾號，訂閱更多優質前端文章喲~

webpack雪碧圖生成

相關文章