詳解webpack url-loader和file-loader

MartinHan 發布于2019-08-23 17:08 / 2820人閱讀

摘要：會將引入的圖片編碼，生成并將其打包到文件中，最終只需要引入這個就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。不依賴于，即使用時，只需要安裝即可，不需要安裝。

大家平時使用url-loader和file-loader的時候有沒有經常遇到以下這些問題或者疑問：

開發環境的時候圖片路徑好好的，怎么發布到線上就404了？？？或者說html里面引用的img路徑是正確的，怎么到css里面路徑404了？

圖片路徑到底是怎么拼接？？？

這兩個到底是什么關系啊？？？

怎么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內的屬性

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

outputPath

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

publicPath（常用于生成環境）

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

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，語言組織的依舊很差）

云服務器 GPU云服務器 equals和區別詳解 sar指標原理和詳解 cookie和session詳解 webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103862.html

從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解一起讀文檔

摘要：構建構建就是把源代碼轉換成發布到線上的可執行代碼，包括如下內容。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。將文件放入到項目中，在中新建一個放字體圖標的文件夾。項目地址 github.com/wudiufo/Web… 知識點概覽： Loader，HMR ,Create React App, Caching, Plug...

王軍 2019-05-23 17:31 評論0 收藏0
webpack多頁應用架構系列（六）：聽說webpack連圖片和字體也能打包？

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言上一篇聽說連也能打包說到使用來加載，這一篇來講講如何籠統地加載其它類型的資源。源文件內容的，用于緩存解決方案。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000690...

dayday_up 2019-08-21 14:26 評論0 收藏0
webpack-loader 之 url-loader

摘要：既生瑜，何生亮人家當然不是以賣萌為生的，賣萌不可恥，但是是有它的用處的。對未設置或者小于設置的圖片進行轉換，以的格式被的所使用而對于大于的圖片用進行解析。配置工欲善其事必先利其器。 url-loader vs file-loader 既生瑜，何生亮？人家當然不是以賣萌為生的，賣萌不可恥，但是url-loader是有它的用處的。url-loader對未設置或者小于limit設置的圖片進...

zxhaaa 2019-08-21 16:57 評論0 收藏0
一個現代化的webpack工程初建

摘要：一前言文章介紹了一個現代化的項目的環境是什么樣的。其中一個就是引用路徑的問題。擴展將單獨打包詳細介紹見這是一個插件，可以簡化創建文件以便為包提供服務。兩種環境的配置在中都支持的配置具體的默認配置查詢可以移步這里的默認設置。一前言文章介紹了一個現代化的項目的webpack4環境是什么樣的。這里只是介紹了基礎的功能，如果需要詳細的相關只是可以去webpack官網去查閱。代碼地址：gi...

MyFaith 2019-08-22 18:07 評論0 收藏0
webpack4初學習

webpack基于node，因此想要學習webpack首先要安裝node。webpack4要安裝node8.2以上版本。 1、安裝webpack 為什么選擇本地安裝，主要是由于以后介紹熱更新這一部分不會報錯，如果全局安裝熱更新就會報錯，以本部分為基礎依次介紹，保證各部分不會出錯。 mkdir webpack-test cd webpack-test npm init //初始化npm，都選擇默認，...

Object 2019-08-23 14:51 評論0 收藏0