一. Assets資源的基本處理需求
Assets，指專案中被參考的資源，通常為各種格式的圖片和字體檔案，當然也可能包含各式各樣其他擴展名的檔案（.json,.xml等），常見的圖片和文字資源的處理包括：
- 體積壓縮
- 雪碧圖合并及參考修正
- 資源的參考路徑自動替換
二. webpack處理參考資源
2.1 資源打包
webpack通過file-loader處理資源檔案，它會將rules規則命中的資源檔案按照配置的資訊（路徑，名稱等）輸出到指定目錄，并回傳其資源定位地址（輸出路徑，用于生產環境的publicPath路徑），默認的輸出名是以原檔案內容計算的MD5 Hash命名的，
在webpack.config.js中添加對圖片檔案的處理規則:
{
test:/\.(jpg|png|svg|gif)/,
use:[{
loader:'file-loader',
options:{
outputPath:'imgs/'
}
}]
}
執行打包命令可以看到png圖片資源的名稱被替換為hash并輸出至構建檔案夾，
CSS檔案中對圖片的參考也被替換為修改后的hash名稱：
html檔案中靜態資源參考替換需要通過html-loader，
2.2 參考優化
構建工具通過url-loader來優化專案中對于資源的參考路徑，并設定大小限制，當資源的體積小于limit時將其直接進行Base64轉換后嵌入參考檔案，體積大于limit時可通過fallback引數指定的loader進行處理，
在webpack.config.js中添加url-loader相關配置:
{
test:/\.(jpg|png|svg|gif)/,
use:[{
loader:'url-loader',
options:{
limit:8129,//小于limit限制的圖片將轉為base64嵌入參考位置
fallback:'file-loader',//大于limit限制的將轉交給指定的loader處理
outputPath:'imgs/'//options會直接傳給fallback指定的loader
}
}]
}
原始CSS檔案中對資源的參考:
.with-img{
background-image: url('../imgs/pic1.png');
}
.with-small-img{
background-image: url('../imgs/6k.gif');
}
打包后變為如下形式，可以看到小于8k的資源被直接內嵌進了CSS檔案而沒有生成獨立的資源檔案：
也可以根據實際需求選擇svg-url-loader,image-webpack-loader等其他插件，
2.3 sprites雪碧圖合成
雪碧圖合成，聽起來是一個顯得略高端的知識點，但它并不是必須進行的，任何一種技術都有其使用場景，有的場景下需要將圖片資源合并為獨立的雪碧圖而減少http請求的次數，有的時候或許通過url-loader直接將其嵌入檔案就可以，矢量圖在不同場景下的處理方式也不相同，
webpack官方倉庫并沒有推薦圖片的處理工具，而是采用url-loader + file-loader作為資源處理的一般通用方案，
1.位圖處理
位圖資源，可以使用webpack-spritesmith插件進行處理，在webpack.config.js的plugins配置項中實體化插件并傳入配置資訊：
new SpritesmithPlugin({
//設定源icons,即icon的路徑，必選項
src: {
cwd: __dirname + '/imgs/pngs',
glob: '*.png' //正則匹配，照著填即可
},
//設定匯出的sprite圖及對應的樣式檔案，必選項
target: {
image: __dirname + '/build/imgs/sprite.png',
css: __dirname + '/build/imgs/sprite.css'
},
//設定sprite.png的參考格式，會自己加入sprite.css的頭部
apiOptions: {
cssImageRef: './sprite.png' //cssImageRef為必選項
},
//配置spritesmith選項，非必選
spritesmithOptions: {
algorithm: 'top-down',//設定圖示的排列方式
padding: 4 //每張小圖的補白,避免雪碧圖中邊界部分的bug
}
})
運行webpack后可以得到sprites.css和合成的雪碧圖:
Sprite.png:
Sprite.css:
2. 矢量圖處理
開發中常用的矢量圖為svg格式，既可以使用inline-svg-loader進行資源嵌入，也可以使用svg-sprite-loader將矢量圖資源合并為雪碧圖，具體采用哪種方案，需要由專案的實際情況來判斷，矢量圖的合并原理與位圖稍有不同，感興趣的讀者可以自行搜索，
源代碼中的參考:
.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 圖片壓縮及其他
圖片資源是可以以清晰度為量化參考進行體積壓縮的，webpack的開發社區也有現成的插件，但不建議通過webpack在每次打包時進行針對影像本身的處理，而是由UI人員處理好以后提供給開發人員，
筆者認為
webpack對于靜態資源所需要解決的首要問題是資源定位，除此之外其他的作業應該從其中剝離，以縮短打包時間，
作者：大史不說話
鏈接：webpack4.0各個擊破（3）—— Assets篇
來源：博客園
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/240386.html
標籤：其他