成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

詳解webpack url-loader和file-loader

MartinHan / 2835人閱讀

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

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

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

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

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

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

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

url-loader作用

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

file-loader作用

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

聯(lián)系

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

基本用法

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

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

接下來(lái)摘取幾個(gè)重要的屬性做說(shuō)明

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)容寫(xiě)到name中，一樣可以生成對(duì)應(yīng)的路徑

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

有了上述的基礎(chǔ)，我們通過(guò)實(shí)例來(lái)說(shuō)明下開(kāi)篇提出的4個(gè)問(wèn)題

實(shí)例說(shuō)明

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

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

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

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

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

這樣你開(kāi)發(fā)環(huán)境的絕對(duì)路徑放到服務(wù)器上面自然就404了，所以要不然用相對(duì)路徑，要不然就統(tǒng)一寫(xiě)死絕對(duì)路徑
（同樣道理，解釋為什么css里面的背景圖路徑404，但是這個(gè)解決起來(lái)需要用到extract-text-webpack-plugin或者mini-css-extract-plugin這個(gè)插件，前者用于webpack4以下版本，后者是4以上版本，配置options里面的publicPath）

圖片路徑到底是怎么拼接？？？
答：output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

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

怎么less里面引用的背景圖片路徑/import其他的less文件路徑不對(duì)？？？
答：這里面的涉及的東西有點(diǎn)多，我打算再開(kāi)一篇文章來(lái)說(shuō)了

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103862.html

相關(guān)文章

  • 從基礎(chǔ)到實(shí)戰(zhàn) 手摸手帶你掌握新版Webpack4.0詳解 一起讀文檔

    摘要：構(gòu)建構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行代碼，包括如下內(nèi)容。自動(dòng)刷新監(jiān)聽(tīng)本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。將文件放入到項(xiàng)目中，在中新建一個(gè)放字體圖標(biāo)的文件夾。 項(xiàng)目地址 github.com/wudiufo/Web… 知識(shí)點(diǎn)概覽： Loader，HMR ,Create React App, Caching, Plug...

    王軍 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？

    摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言上一篇聽(tīng)說(shuō)連也能打包說(shuō)到使用來(lái)加載，這一篇來(lái)講講如何籠統(tǒng)地加載其它類型的資源。源文件內(nèi)容的，用于緩存解決方案。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000690...

    dayday_up 評(píng)論0 收藏0

  • webpack-loader 之 url-loader

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

    zxhaaa 評(píng)論0 收藏0

  • 一個(gè)現(xiàn)代化的webpack工程初建

    摘要：一前言文章介紹了一個(gè)現(xiàn)代化的項(xiàng)目的環(huán)境是什么樣的。其中一個(gè)就是引用路徑的問(wèn)題。擴(kuò)展將單獨(dú)打包詳細(xì)介紹見(jiàn)這是一個(gè)插件，可以簡(jiǎn)化創(chuàng)建文件以便為包提供服務(wù)。兩種環(huán)境的配置在中都支持的配置具體的默認(rèn)配置查詢可以移步這里的默認(rèn)設(shè)置。 一 前言 文章介紹了一個(gè)現(xiàn)代化的項(xiàng)目的webpack4環(huán)境是什么樣的。這里只是介紹了基礎(chǔ)的功能，如果需要詳細(xì)的相關(guān)只是可以去webpack官網(wǎng)去查閱。代碼地址：gi...

    MyFaith 評(píng)論0 收藏0

  • webpack4初學(xué)習(xí)

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

    Object 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<