載入和處理其他資源

我們專案中可以載入，我們需要在專案中使用，比較常見的使用的方式是兩種：

這個時候，打包會報錯

要處理jpg、png等格式的，我們也需要有對應的loader：file-loader

file-loader的作用就是幫助我們處理import/require()方式引入的乙個檔案資源，並且會將它放到我們輸出的資料夾中；

npm install file-loader -d

檔案的名稱規則

有時候我們處理後的檔名稱按照一定的規則進行顯示：比如保留原來的檔名、副檔名，同時為了防止重複，包含乙個hash值等；

這個時候我們可以使用placeholders來完成，webpack給我們提供了大量的placeholders來顯示不同的內容：

我們可以在文件中查閱自己需要的placeholder；

這裡介紹幾個最常用的placeholder：

我們可以按照如下的格式編寫：

當然，我們剛才通過 img/ 已經設定了資料夾，這個也是vue、react腳手架中常見的設定方式：其實按照這種設定方式就可以了；當然我們也可以通過outputpath來設定輸出的資料夾；

url-loader和file-loader的工作方式是相似的，但是可以將較小的檔案，轉成base64的uri。

npm install url-loader -d

url-loader的limit

但是開發中我們往往是小的需要轉換，但是大的直接使用即可，這是因為小的轉換base64之後可以和頁面一起被請求，減少不必要的請求過程；而大的也進行轉換，反而會影響頁面的請求速度；

url-loader有乙個options屬性limit，可以用於設定轉換的限制；下面的**38kb的會進行base64編碼，而295kb的不會；

我們當前使用的webpack版本是webpack5：

在webpack5之前，載入這些資源我們需要使用一些loader，比如raw-loader 、url-loader、file-loader；在webpack5之後，我們可以直接使用資源模組型別（asset module type），來替代上面的這些loader；

資源模組型別(asset module type)，通過新增 4 種新的模組型別，來替換所有這些 loader：

如何可以自定義檔案的輸出路徑和檔名呢？

url-loader的limit效果

我們需要兩個步驟來實現：

檢視**

,
parser: }},

如果我們需要使用某些特殊的字型或者字型圖示，那麼我們會引入很多字型相關的檔案，這些檔案的處理也是一樣的。

克軍做了一系列測試 js和css的順序關係，給出了現象和結論，但未給出原因。js 和 css 在頁面中的位置，會影響其他資源指 img 等非 js 和 css 資源的載入順序，究其原因，有三個值得注意的點以上三點可簡述為三條基本定律定律二 js 執行依賴 css 最新渲染。定律三現代瀏覽器...