url-loader作用：

如果頁面圖片較多，發(fā)很多 http 請求，會降低頁面性能。這個問題可以通過 url-loader 解決。url-loader 會將引入的圖片以 base64 編碼并打包到文件中，最終只需要引入這個dataURL 就能訪問圖片了。當(dāng)然，如果圖片較大，編碼會消耗性能。因此 url-loader 提供了一個 limit 參數(shù)，小于 limit 字節(jié)的文件會被轉(zhuǎn)為 base64，大于 limit 的會使用 file-loader 的參數(shù)進行命名，并把圖片 copy 到指定文件夾內(nèi)。

由于 url-loader 包含了 file-loader 所以，file-loader 內(nèi)的 option 在 url-loader 中均能使用。

url-loader 不適用的場景：

一個圖片好幾次或大量使用時，瀏覽器本來是有緩存的，結(jié)果你直接生成 base64 打包到代碼里面，請求速度來講無疑是不劃算的。

url-loader 只處理兩種圖片引入情況：（注意url-loader的引入必須是相對路徑）

• React 組件內(nèi)部直接引入：

import red_png from "./red.png";
<img src = {red_png} />

• css 背景圖引入：(使用url-loader相對路徑，不使用的話需要絕對引用)

background-image: url("./images/blue.png");

只有這兩種圖片引入方式：

• 當(dāng)圖片大小小于 limit 時：base64 打包
  = 當(dāng)圖片大小大于 limit 時：file-loader 會起作用，按照參數(shù)name: "img/[name].[hash:7].