webpack4.0各個(gè)擊破（3）—— Assets篇

webpack作為前端最火的構(gòu)建工具，是前端自動(dòng)化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過問題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）

一. Assets資源的基本處理需求

Assets，指項(xiàng)目中被引用的資源，通常為各種格式的圖片和字體文件，當(dāng)然也可能包含各式各樣其他擴(kuò)展名的文件（.json,.xml等），常見的圖片和文字資源的處理包括：

• 體積壓縮
• 雪碧圖合并及引用修正
• 資源的引用路徑自動(dòng)替換

二. webpack處理引用資源

2.1 資源打標(biāo)

webpack通過file-loader處理資源文件，它會(huì)將rules規(guī)則命中的資源文件按照配置的信息（路徑，名稱等）輸出到指定目錄，并返回其資源定位地址（輸出路徑，用于生產(chǎn)環(huán)境的publicPath路徑），默認(rèn)的輸出名是以原文件內(nèi)容計(jì)算的MD5 Hash命名的。

在webpack.config.js中添加對圖片文件的處理規(guī)則:

 {
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'file-loader',
      options:{
        outputPath:'imgs/'
      }
    }]
  }

執(zhí)行打包命令可以看到png圖片資源的名稱被替換為hash并輸出至構(gòu)建文件夾。

CSS文件中對圖片的引用也被替換為修改后的hash名稱：

html文件中靜態(tài)資源引用替換需要通過html-loader。

2.2 引用優(yōu)化

構(gòu)建工具通過url-loader來優(yōu)化項(xiàng)目中對于資源的引用路徑，并設(shè)定大小限制，當(dāng)資源的體積小于limit時(shí)將其直接進(jìn)行Base64轉(zhuǎn)換后嵌入引用文件，體積大于limit時(shí)可通過fallback參數(shù)指定的loader進(jìn)行處理。

在webpack.config.js中添加url-loader相關(guān)配置:

  {
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'url-loader',
      options:{
        limit:8129,//小于limit限制的圖片將轉(zhuǎn)為base64嵌入引用位置
        fallback:'file-loader',//大于limit限制的將轉(zhuǎn)交給指定的loader處理
        outputPath:'imgs/'//options會(huì)直接傳給fallback指定的loader
      }
    }]
  }

原始CSS文件中對資源的引用:

.with-img{
    background-image: url('../imgs/pic1.png');
}
.with-small-img{
    background-image: url('../imgs/6k.gif');
}

打包后變?yōu)槿缦滦问?，可以看到小?code>8k的資源被直接內(nèi)嵌進(jìn)了CSS文件而沒有生成獨(dú)立的資源文件：

也可以根據(jù)實(shí)際需求選擇svg-url-loader,image-webpack-loader等其他插件。

2.3 sprites雪碧圖合成

雪碧圖合成，聽起來是一個(gè)顯得略高端的知識(shí)點(diǎn)，但它并不是必須進(jìn)行的，任何一種技術(shù)都有其使用場景。有的場景下需要將圖片資源合并為獨(dú)立的雪碧圖而減少http請求的次數(shù)，有的時(shí)候或許通過url-loader直接將其嵌入文檔就可以。矢量圖在不同場景下的處理方式也不相同。

webpack官方倉庫并沒有推薦圖片的處理工具，而是采用url-loader + file-loader作為資源處理的一般通用方案。

1.位圖處理

位圖資源，可以使用webpack-spritesmith插件進(jìn)行處理，在webpack.config.js的plugins配置項(xiàng)中實(shí)例化插件并傳入配置信息：

  new SpritesmithPlugin({
    //設(shè)置源icons,即icon的路徑，必選項(xiàng)
    src: {
      cwd: __dirname + '/imgs/pngs',
      glob: '*.png' //正則匹配，照著填即可
    },
    //設(shè)置導(dǎo)出的sprite圖及對應(yīng)的樣式文件，必選項(xiàng)
    target: {
      image: __dirname + '/build/imgs/sprite.png',
      css: __dirname + '/build/imgs/sprite.css' 
    },
    //設(shè)置sprite.png的引用格式，會(huì)自己加入sprite.css的頭部
    apiOptions: {
      cssImageRef: './sprite.png' //cssImageRef為必選項(xiàng)
    },
    //配置spritesmith選項(xiàng)，非必選
    spritesmithOptions: {
      algorithm: 'top-down',//設(shè)置圖標(biāo)的排列方式
      padding: 4 //每張小圖的補(bǔ)白,避免雪碧圖中邊界部分的bug
    }
  })

運(yùn)行webpack后可以得到sprites.css和合成的雪碧圖:

Sprite.png:

Sprite.css:

2. 矢量圖處理

開發(fā)中常用的矢量圖為svg格式，既可以使用inline-svg-loader進(jìn)行資源嵌入，也可以使用svg-sprite-loader將矢量圖資源合并為雪碧圖，具體采用哪種方案，需要由項(xiàng)目的實(shí)際情況來判斷。矢量圖的合并原理與位圖稍有不同，感興趣的讀者可以自行搜索。

源代碼中的引用:

.class1{
    background-image: url('../imgs/svgs/001-home.svg') no-repeat 0 0;
}

使用inline-svg-loader加載器打包后的引用：

.class1{
    background-image: url("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 16 16\"><path fill=\"#000000\" d=\"M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z\"></path></svg>") no-repeat 0 0;
}

2.4 圖片壓縮及其他

圖片資源是可以以清晰度為量化參考進(jìn)行體積壓縮的，webpack的開發(fā)社區(qū)也有現(xiàn)成的插件，但不建議通過webpack在每次打包時(shí)進(jìn)行針對圖像本身的處理，而是由UI人員處理好以后提供給開發(fā)人員。

筆者認(rèn)為webpack對于靜態(tài)資源所需要解決的首要問題是資源定位，除此之外其他的工作應(yīng)該從其中剝離，以縮短打包時(shí)間。