>[success] # loader -- 圖片和字體（5.x） 1. **在webpack5之前**，加載這些資源我們需要使用一些**loader**，比如`raw-loader` 、`url-loader`、`file-loader`,但在**Webpack 5開始**上述`file-loader`、`url-loader`、`raw-loader`都并不局限于處理圖片，它們還可以被用于加載任意類型的多媒體或文本文件，使用頻率極高**Webpack5** 直接內置了這些能力，**開箱即可使用**。 2. 關于使用**webpack5開始**，我們可以直接使用**資源模塊類型（asset module type)**,之后只需要通過`module.rules.type`屬性指定[資源類型](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fguides%2Fasset-modules%2F "https://webpack.js.org/guides/asset-modules/")即可,常見四種 * `asset/resource` 發送一個單獨的文件并導出 URL，之前通過使用` file-loader` 實現 * `asset/inline` 導出一個資源的 data URI，之前通過使用 `url-loader` 實現 * `asset/source` 導出資源的源代碼，之前通過使用 `raw-loader` 實現； * `asset` 在導出一個 data URI 和發送一個單獨的文件之間自動選擇，之前通過使用` url-loader`，并且配置資源體積限制實現 3. [Asset Module](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fguides%2Fasset-modules%2F "https://webpack.js.org/guides/asset-modules/")的原生支持，讓 Webpack 有機會介入這些多媒體資源的解析、生成過程，從而有機會實現更標準、高效的資源處理模型。[`module.rules.type`](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fmodule%2F%23ruletype "https://webpack.js.org/configuration/module/#ruletype")已經支持 JSON、WebAssemsbly、二進制、文本等資源類型不僅僅只是圖片和文字資源 >[info] ## 使用 * 入口文件代碼 ~~~ // 導入圖片 import zznhImage from './images/zznh.png' window.onload = function () { const imgEl = document.createElement('img') imgEl.src = zznhImage document.body.append(imgEl) } ~~~ >[danger] ##### asset/resource 默認情況下，`asset/resource`生成的文件會以`[hash][ext][query]`方式重命名，可以通過[output.assetModuleFilename](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Foutput%2F%23outputassetmodulefilename "https://webpack.js.org/configuration/output/#outputassetmodulefilename")屬性控制 ~~~ { test: /\.(png|jpg)$/, type: 'asset/resource', }, ~~~ * 原始圖片會被重命名并復制到產物文件夾，同時在代碼中插入圖片 URL 地址  >[danger] ##### asset/inline ~~~ { test: /\.(png|jpg)$/, type: 'asset/inline', }, ~~~ * 生成一個data URI圖片  >[danger] ##### asset 1. 和之前的url`url-loader`處理一樣，小于`maxSize`是以 `data URI` 的形式展示 超過`maxSize`值的圖片則直，原始圖片會被重命名并復制到產物文件夾，同時在代碼中插入圖片 URL 地址 2. [module.rules.parser.dataUrlCondition](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fmodule%2F%23ruleparserdataurlcondition "https://webpack.js.org/configuration/module/#ruleparserdataurlcondition")用于限定文件大小閾值，對標`url-loader`的`limit`屬性 ~~~ { test: /\.(png|jpg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 60 * 1024, // 6mb }, }, generator: { // 占位符 // name: 指向原來的圖片名稱 // ext: 擴展名 // hash: webpack生成的hash // 如果加路徑前綴 那么就是生成一個指定文件夾例如下面生成一個img路徑 filename: 'img/[name]_[hash:8][ext]', }, }, ~~~  >[danger] ##### asset/source 1. 導出資源的源代碼，即到處文件信息并且輸出展示，這里對能到處的圖片指的是`svg`這種 ~~~ module.exports = { // ... module: { rules: [ { test: /\.svg$/i, - use: ['raw-loader'] + type: "asset/source" }, ], }, }; ~~~ 2. 創建一個`.txt`后綴的文本文件，設置`type`為`asset/source`，在`index.js`里面導入該文本并插入在`body`中，即將其當成資源顯示在頁面上  >[info] ## 對一些配置屬性講解 1. `[hash][name][query]` 這三個配置意思 * `[ext]`： 處理文件的擴展名； * `[name]`：處理文件的名稱； * `[hash]`：文件的內容，使用MD4的散列函數處理，生成的一個128位的hash值（32個十六進制）； 2. 自定義文件的輸出路徑和文件名 * 修改output，添加`assetModuleFilename`屬性，`output.assetModuleFilename`來修改此模板字符串，默認是`[hash][ext][query] `組合可以自行修改成其他  * 在`Rule`中，添加一個`generator`屬性，并且設置`filename`  注意`generator 的優先級高于 assetModuleFilename` >[info] ## 參考 概念性質參考上一個章節 **loader -- 圖片和字體（4.x）** [Webpack5 核心原理與應用實踐](https://juejin.cn/book/7115598540721618944)