這篇文章主要介紹了webpack file-loader和url-loader的區別,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
1.前言
如果我們希望在頁面引入圖片(包括img的src和background的url)。當我們基於webpack進行開發時,引入圖片會遇到一些問題。
其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說,我們都知道,webpack最終會將各個模塊打包成一個文件,因此我們樣式中的url路徑是相對入口html頁面的,而不是相對於原始css文件所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的,file-loader可以解析項目中的url引入(不僅限於css),根據我們的配置,將圖片拷貝到相應的路徑,再根據我們的配置,修改打包後文件引用路徑,使之指向正確的文件。
另外,如果圖片較多,會發很多http請求,會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼,生成dataURl。相當於把圖片數據翻譯成一串字符。再把這串字符打包到文件中,最終只需要引入這個文件就能訪問圖片了。當然,如果圖片較大,編碼會消耗性能。因此url-loader提供了一個limit參數,小於limit字節的文件會被轉爲DataURl,大於limit的還會使用file-loader進行copy。
url-loader和file-loader是什麼關係呢?簡答地說,url-loader封裝了file-loader。url-loader不依賴於file-loader,即使用url-loader時,只需要安裝url-loader即可,不需要安裝file-loader,因爲url-loader內置了file-loader。通過上面的介紹,我們可以看到,url-loader工作分兩種情況:1.文件大小小於limit參數,url-loader將會把文件轉爲DataURL;2.文件大小大於limit,url-loader會調用file-loader進行處理,參數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。
推薦文檔:
file-loader: https://github.com/webpack-contrib/file-loader
url-loader: https://www.jb51.net/article/122936.htm
2.loader中的參數
上面提到url-loader的參數和file-loader的參數,那麼loader的參數是個什麼概念呢?loader的參數用來自定義loader處理文件時的工作特性。下面以url-loader爲例,介紹一下webpack的loader中的參數。
首先看下面的例子:
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的參數,還有一種等價的寫法:
{ test: /\.jpeg$/, use: 'url-loader?limit=1024 }
如果有多個參數,就用 ‘&' 連接起來。和http請求中的參數類似。正如前面介紹的,limit這個參數就是告訴url-loader,在文件小於多少個字節時,將文件編碼並返回DataURL。此外url-loader還有一些用於file-loader的參數。我們知道,file-loader的作用是將文件複製到其他目錄。file-loader提供了一系列參數允許我們自定義諸如輸出文件、文件名規則、發佈路徑等特性的參數。下面介紹一下這些參數。
3.url-loader的參數
先看下配置好的代碼:
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個參數:limit、name、outputPath、publicPath。其中limit已經說明過。file-loader相關的是name、outputPath和publicPath。下面解釋一下這3個參數
name表示輸出的文件名規則,如果不添加這個參數,輸出的就是默認值:文件哈希。加上[path]表示輸出文件的相對路徑與當前文件相對路徑相同,加上[name].[ext]則表示輸出文件的名字和擴展名與當前相同。加上[path]這個參數後,打包後文件中引用文件的路徑也會加上這個相對路徑。
outputPath表示輸出文件路徑前綴。圖片經過url-loader打包都會打包到指定的輸出文件夾下。但是我們可以指定圖片在輸出文件夾下的路徑。比如outputPath=img/,圖片被打包時,就會在輸出文件夾下新建(如果沒有)一個名爲img的文件夾,把圖片放到裏面。
publicPath表示打包文件中引用文件的路徑前綴,如果你的圖片存放在CDN上,那麼你上線時可以加上這個參數,值爲CDN地址,這樣就可以讓項目上線後的資源引用路徑指向CDN了。
4.安裝url-loader
npm install --save-dev url-loader
5.demo
https://github.com/KIDFUCKER/webpack-demo.git
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。