webpack4.0各個擊破（3）—— Assets篇

一. 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相關配置:

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

打包后變為如下形式，可以看到小于8k的資源被直接內嵌進了CSS文件而沒有生成獨立的資源文件：

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

2.3 sprites雪碧圖合成

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

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

位圖資源，可以使用webpack-spritesmith插件進行處理，在webpack.config.js的plugins配置項中實例化插件并傳入配置信息：

運行webpack后可以得到sprites.css和合成的雪碧圖:

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

源代碼中的引用:

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

2.4 圖片壓縮及其他

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

附件： demo.rar 33.37KB 下載次數：0次

webpack CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。