Webpack配置-其餘資源加載以及處理（圖片、字體、文件等）

在 webpack5以前加載資源文件通常會是用 file-loader、url-loader、raw-loader等，可是在webpack5以後能夠直接使用資源模塊類型（asset module type）來替代上述 loader,本會會先將 webpack5以前的加載方式，以及webpack5以後新加入的加載方式

• 準備工做

  準備兩張大小不一的圖片資源，我這邊準備的是一張56KB的一張圖和 11KB的一張圖，兩張圖分別加入到項目中，而後將兩張圖片顯示帶頁面上以後打包看輸出結果
  代碼以下： 打包結果以下： 打包會報錯提示須要一個合適的 loader去加載此類文件

• file-loader

  file-loader的做用就是幫助咱們處理import/require()方式引入的文件資源而且會將它放到咱們輸出的文件夾中，上文中有提到引入圖片資源以後會報錯因此此時咱們在引入file-loader以後而後再配置完成在打包看結果

  • 安裝

    yarn add file-loader -D

  • 配置

    只須要在 webpack中添加一個 rule就行 打包結果： 發如今 build文件夾中多了兩個文件，這兩個文件就是使用的兩個圖片，而後再運行發現圖片可以正常加載

  • 文件的名稱規則以及配置文件名稱

    從上文中的打包結果能夠看到會將資源文件會被添加到指定的打包文件夾中，而且名稱變了變成了一段很長的字符串（這裏的字符串是使用MD4的散列函數處理生成的一個hash值），部分公司會要求打包以後的文件名的格式好比須要保留原來的文件名、加上公司前綴、保留擴展名等，這個時候就能夠使用 PlaceHolders來完成,關於 PlaceHolders官方文檔上有詳細的解釋： 這裏列舉一些經常使用的 PlaceHolders
    • ext:處理文件擴展名
    • name:處理文件名稱
    • hash:使用MD4的散列函數處理生成的一個hash值（默認狀況下，它是哈希的十六進制摘要）
    • contentHash:指定生成文件內容哈希值的哈希方法。(默認 md4)
    • path:相對於 webpack/config context 的資源路徑。
    • hash:<length>:截圖hash的長度，默認32個字符
    配置方式:
    打包結果：
    

  • 設置文件的存放路徑

    • 上文中在設置name的時候前面拼上路徑
    • 設置outputPath

• url-loader

  url-loader用法和做用基本上和file-loader是相同的，可是url-loader能夠將文件轉成成base64的URI。
  • 安裝
    yarn add url-loader -D
  • 配置 發現僅僅是將file-loader替換成url-loader能正常打包而且可否正常顯示，可是 build文件夾中並無對應的資源文件，是應爲url-loader默認會將圖片資源轉成 base64編碼格式以下圖：
  • url-loader的limit 上文提到url-loader會將圖片資源默認都轉成base64編碼格式，這樣作有弊端，若是圖片特別多的時候或者是圖片資源很大的時候整個頁面的加載速度就會很慢，因此此時就能夠使用 limit來作限制，就是圖片資源大於多少的時候就不進行base64編碼格式的轉換，具體配置以下圖： 運行結果：
    發現添加 limit大圖再也不被轉換

• asset module type

  資源模塊的4種類型（這裏引用的是官方文檔的說明）
  • asset/resource 發送一個單獨的文件並導出 URL。以前經過使用 file-loader 實現。
  • asset/inline 導出一個資源的 data URI。以前經過使用 url-loader 實現。
  • asset/source 導出資源的源代碼。以前經過使用 raw-loader 實現。
  • asset 在導出一個 data URI 和發送一個單獨的文件之間自動選擇。以前經過使用 url-loader，而且配置資源體積限制實現。
  配置 一樣的添加 rule
  1. 加載圖片 配置文件名稱和指定路徑和上文的 loader差不太多以下圖指定文件名稱和對應的路徑 還一種修改文件路徑的方式是經過設置output.assetModuleFilename來修改如圖 這裏須要注意若是設置了 filename會優先使用 filename的配置
  2. url-loader的limit效果 首先資源類型須要設置成 asset而後在設置 parser.dataUrlCondition.maxSize參數以下圖： 運行結果：