webpack雪碧圖生成

時間 2019-11-06

標籤 webpack 雪碧生成简体版

原文原文鏈接

原文連接：http://dopro.io/webpack-sprites.htmljavascript

前言

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

目標

先說下咱們但願達到的效果。html

一、須要合成的雪碧圖icon統一放在src / assets / sprite文件夾下前端

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

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

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

五、編譯後獲得的樣式以下,包括width、height也一同輸出

常見方案

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

一種是以webpack-spritesmith、postcss-sprites爲表明的插件，webpack-spritesmith主要的運行方式是會預先把sprite目錄中的圖標拼合好，頁面主要依賴生成後的雪碧圖。而postcss-sprites則是經過對已經生成的 CSS 文件進行分析，將其中的 background 或 background-image 做爲依賴收集，合併成雪碧圖後再將相關參數替換。webpack

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

這種經過註釋的方式來識別並非很好。

目前市面上的方案都不能知足咱們的個性化要求，相對於插件針對某一文件夾/文件處理方式，咱們更但願採用loader鏈式處理的方式來實現。github

解決方案

採用loader的話只能經過添加標記的方式告知須要合成，好比在background url加上「?_sprite」，而後利用正則獲取圖片路徑，給到相關的庫去合成。web

這裏主要利用spritesmith開源項目來進行開發，spritesmith很強大，它能夠比較靈活的合成雪碧圖，經過相應的API能夠得到圖標的相關信息。

其中sprites是須要被合成的圖片路徑，裏面包含了圖標的絕對路徑前端工程化

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

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

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

通常項目中的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'
                }],
              })
          },
      ]
}
複製代碼