詳解webpack url-loader和file-loader

你們平時使用url-loader和file-loader的時候有沒有常常遇到如下這些問題或者疑問：

1. 開發環境的時候圖片路徑好好的，怎麼發佈到線上就404了？？？或者說html裏面引用的img路徑是正確的，怎麼到css裏面路徑404了？
2. 圖片路徑究竟是怎麼拼接？？？
3. 這兩個究竟是什麼關係啊？？？
4. 怎麼less裏面引用的背景圖片路徑/import其餘的less文件路徑不對？？？

若是剛好你也有以上這些問題或者疑問，那正好這篇文章能給你很好的解答
注：這兩個loader不只能夠處理圖片，還能夠處理音頻，視頻，字體等文件

url-loader做用

若是頁面圖片較多，發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl並將其打包到文件中，最終只須要引入這個dataURL就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy

file-loader做用

在css文件中定義background的屬性或者在html中引入image的src，咱們知道在webpack打包後這些圖片會打包至定義好的一個文件夾下，和開發時候的相對路徑會不同，這就會致使導入圖片路徑的錯誤。而file-loader正是爲了解決此類問題而產生的，他修改打包後圖片的儲存路徑，再根據配置修改咱們引用的路徑，使之對應引入

聯繫

url-loader內部封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader。經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可

基本用法

因爲url-loader包含了file-loader因此，file-loader內的option在url-loader中均能使用
以下爲file-loader內的屬性

以下爲url-loader內的屬性

接下來摘取幾個重要的屬性作說明

1. outputPath

   該屬性指明咱們最終導出的文件路徑
   最終導出的文件路徑 === output.path + url-loader.outputPath + url-loader.name

2. publicPath（經常使用於生成環境）

   該屬性指明咱們最終引用的文件路徑（打包生成的index.html文件裏面引用資源的前綴）
   最終引用的文件路徑前綴 === output.publicPath + url-loader.publicPath + url-loader.name

3. name

   該屬性指明文件的最終名稱。
   一樣的，咱們能夠直接把outputPath的內容寫到name中，同樣能夠生成對應的路徑

通過上面的說明，咱們得出結論，最終的靜態文件路徑（圖片，音頻，視頻，字體等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

有了上述的基礎，咱們經過實例來講明下開篇提出的4個問題

實例說明

打包後的文件結構

img裏面的四個綠色的文件除去home-logo.png都是大於10kb的大圖片，其餘都是小於10kb的小圖標

以上兩個截圖分別是開發環境和生成環境的圖片引用路徑

• 開發環境的時候圖片路徑好好的，怎麼發佈到線上就404了？？？或者說html裏面引用的img路徑是正確的，怎麼到css裏面路徑404了？
  答：其實你們仔細想想就能知道答案，咱們在本地開發的時候都是localhost:8080/下面的根目錄，因此當圖片生成以下的絕對地址是不會出問題的，但是你把一樣的webpack配置放到生成環境上就不必定了，由於生成環境大部分的前端靜態文件都不是在根目錄啊，有可能就是這樣的目錄結構

  www/
   +folder/
     +static/
       +css/
       +img/
       +js/
     +index.html

  這樣你開發環境的絕對路徑放到服務器上面天然就404了，因此要否則用相對路徑，要否則就統一寫死絕對路徑
  （一樣道理，解釋爲何css裏面的背景圖路徑404，可是這個解決起來須要用到extract-text-webpack-plugin或者mini-css-extract-plugin這個插件，前者用於webpack4如下版本，後者是4以上版本，配置options裏面的publicPath）

  

• 圖片路徑究竟是怎麼拼接？？？
  答：output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name
• 這兩個究竟是什麼關係啊？？？
  答：上面基本上都說過了，總結一句話就是相互互補的關係，url-loader不能轉base64的時候file-loader來處理它
• 怎麼less裏面引用的背景圖片路徑/import其餘的less文件路徑不對？？？
  答：這裏面的涉及的東西有點多，我打算再開一篇文章來講了

文章到這裏就結束了，但願能幫助到你們（BTW，語言組織的依舊不好）