詳解webpack url-loader和file-loader

MartinHan 發(fā)布于2019-08-23 17:08 / 2810人閱讀

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

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

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

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

這兩個到底是什么關(guān)系啊？？？

怎么less里面引用的背景圖片路徑/import其他的less文件路徑不對？？？

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

url-loader作用

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

file-loader作用

在css文件中定義background的屬性或者在html中引入image的src，我們知道在webpack打包后這些圖片會打包至定義好的一個文件夾下，和開發(fā)時候的相對路徑會不一樣，這就會導(dǎo)致導(dǎo)入圖片路徑的錯誤。而file-loader正是為了解決此類問題而產(chǎn)生的，他修改打包后圖片的儲存路徑，再根據(jù)配置修改我們引用的路徑，使之對應(yīng)引入

聯(lián)系

url-loader內(nèi)部封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)，url-loader將會把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會調(diào)用file-loader進(jìn)行處理，參數(shù)也會直接傳給file-loader。因此我們只需要安裝url-loader即可

基本用法

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

如下為url-loader內(nèi)的屬性

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

outputPath

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

publicPath（常用于生成環(huán)境）

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

name

該屬性指明文件的最終名稱。
同樣的，我們可以直接把outputPath的內(nèi)容寫到name中，一樣可以生成對應(yīng)的路徑

經(jīng)過上面的說明，我們得出結(jié)論，最終的靜態(tài)文件路徑（圖片，音頻，視頻，字體等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

有了上述的基礎(chǔ)，我們通過實例來說明下開篇提出的4個問題

實例說明

打包后的文件結(jié)構(gòu)

img里面的四個綠色的文件除去home-logo.png都是大于10kb的大圖片，其他都是小于10kb的小圖標(biāo)

以上兩個截圖分別是開發(fā)環(huán)境和生成環(huán)境的圖片引用路徑

開發(fā)環(huán)境的時候圖片路徑好好的，怎么發(fā)布到線上就404了？？？或者說html里面引用的img路徑是正確的，怎么到css里面路徑404了？
答：其實大家仔細(xì)想一想就能知道答案，我們在本地開發(fā)的時候都是localhost:8080/下面的根目錄，所以當(dāng)圖片生成如下的絕對地址是不會出問題的，可是你把同樣的webpack配置放到生成環(huán)境上就不一定了，因為生成環(huán)境大部分的前端靜態(tài)文件都不是在根目錄啊，有可能就是這樣的目錄結(jié)構(gòu)

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

這樣你開發(fā)環(huán)境的絕對路徑放到服務(wù)器上面自然就404了，所以要不然用相對路徑，要不然就統(tǒng)一寫死絕對路徑
（同樣道理，解釋為什么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

這兩個到底是什么關(guān)系啊？？？
答：上面基本上都說過了，總結(jié)一句話就是相互互補(bǔ)的關(guān)系，url-loader不能轉(zhuǎn)base64的時候file-loader來處理它

怎么less里面引用的背景圖片路徑/import其他的less文件路徑不對？？？
答：這里面的涉及的東西有點多，我打算再開一篇文章來說了

文章到這里就結(jié)束了，希望能幫助到大家
（BTW，語言組織的依舊很差）