webpack file-loader和url-loader的區(qū)別
1.前言
如果我們希望在頁面引入圖片(包括img的src和background的url)。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí),引入圖片會(huì)遇到一些問題。
其中一個(gè)就是引用路徑的問題。拿background樣式用url引入背景圖來說,我們都知道,webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件,因此我們樣式中的url路徑是相對(duì)入口html頁面的,而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問題是用file-loader解決的,file-loader可以解析項(xiàng)目中的url引入(不僅限于css),根據(jù)我們的配置,將圖片拷貝到相應(yīng)的路徑,再根據(jù)我們的配置,修改打包后文件引用路徑,使之指向正確的文件。
另外,如果圖片較多,會(huì)發(fā)很多http請(qǐng)求,會(huì)降低頁面性能。這個(gè)問題可以通過url-loader解決。url-loader會(huì)將引入的圖片編碼,生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中,最終只需要引入這個(gè)文件就能訪問圖片了。當(dāng)然,如果圖片較大,編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù),小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl,大于limit的還會(huì)使用file-loader進(jìn)行copy。
url-loader和file-loader是什么關(guān)系呢?簡答地說,url-loader封裝了file-loader。url-loader不依賴于file-loader,即使用url-loader時(shí),只需要安裝url-loader即可,不需要安裝file-loader,因?yàn)閡rl-loader內(nèi)置了file-loader。通過上面的介紹,我們可以看到,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即可。
推薦文檔:
file-loader: https://github.com/webpack-contrib/file-loader
url-loader: http://www.dbjr.com.cn/article/122936.htm
2.loader中的參數(shù)
上面提到url-loader的參數(shù)和file-loader的參數(shù),那么loader的參數(shù)是個(gè)什么概念呢?loader的參數(shù)用來自定義loader處理文件時(shí)的工作特性。下面以u(píng)rl-loader為例,介紹一下webpack的loader中的參數(shù)。
首先看下面的例子:
module.exports = { // 入口文件路徑,__dirname是根目錄 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.jpeg$/, use: [ { loader: 'url-loader', options: { limit: '1024' } }, ] } ] } }
其中,url-loader的配置中的options屬性表示的就是url-loader的參數(shù),還有一種等價(jià)的寫法:
{ test: /\.jpeg$/, use: 'url-loader?limit=1024 }
如果有多個(gè)參數(shù),就用 ‘&' 連接起來。和http請(qǐng)求中的參數(shù)類似。正如前面介紹的,limit這個(gè)參數(shù)就是告訴url-loader,在文件小于多少個(gè)字節(jié)時(shí),將文件編碼并返回DataURL。此外url-loader還有一些用于file-loader的參數(shù)。我們知道,file-loader的作用是將文件復(fù)制到其他目錄。file-loader提供了一系列參數(shù)允許我們自定義諸如輸出文件、文件名規(guī)則、發(fā)布路徑等特性的參數(shù)。下面介紹一下這些參數(shù)。
3.url-loader的參數(shù)
先看下配置好的代碼:
module.exports = { // 入口文件路徑,__dirname是根目錄 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.jpeg$/, use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/', } ] } }
這里涉及到了4個(gè)參數(shù):limit、name、outputPath、publicPath。其中l(wèi)imit已經(jīng)說明過。file-loader相關(guān)的是name、outputPath和publicPath。下面解釋一下這3個(gè)參數(shù)
name表示輸出的文件名規(guī)則,如果不添加這個(gè)參數(shù),輸出的就是默認(rèn)值:文件哈希。加上[path]表示輸出文件的相對(duì)路徑與當(dāng)前文件相對(duì)路徑相同,加上[name].[ext]則表示輸出文件的名字和擴(kuò)展名與當(dāng)前相同。加上[path]這個(gè)參數(shù)后,打包后文件中引用文件的路徑也會(huì)加上這個(gè)相對(duì)路徑。
outputPath表示輸出文件路徑前綴。圖片經(jīng)過url-loader打包都會(huì)打包到指定的輸出文件夾下。但是我們可以指定圖片在輸出文件夾下的路徑。比如outputPath=img/,圖片被打包時(shí),就會(huì)在輸出文件夾下新建(如果沒有)一個(gè)名為img的文件夾,把圖片放到里面。
publicPath表示打包文件中引用文件的路徑前綴,如果你的圖片存放在CDN上,那么你上線時(shí)可以加上這個(gè)參數(shù),值為CDN地址,這樣就可以讓項(xiàng)目上線后的資源引用路徑指向CDN了。
4.安裝url-loader
npm install --save-dev url-loader
5.demo
https://github.com/KIDFUCKER/webpack-demo.git
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02微信小程序動(dòng)畫組件使用解析,類似vue,且更強(qiáng)大
這篇文章主要介紹了微信小程序動(dòng)畫組件,類似vue,且更強(qiáng)大使用解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05用javascript修復(fù)瀏覽器中頭痛問題的方法整理篇[譯]
我們提倡無論何時(shí)都盡可能地使用CSS,這樣我們更容易取得成功.現(xiàn)在瀏覽器對(duì)CSS的支持已經(jīng)非常好,肯定足以讓你用來控制你的網(wǎng)頁布局與排版.但,即使如此,還是有某些頁面元素會(huì)在不同的瀏覽器下表現(xiàn)也不一樣.2008-11-11微信小程序一周時(shí)間表功能實(shí)現(xiàn)
這篇文章主要介紹了微信小程序一周時(shí)間表功能實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對(duì)js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧2022-09-09