webpack學習筆記-2-file-loader 和 url-loader

來源:互聯網
上載者:User

標籤:安裝   字元   需要   翻譯   說明   上線   相同   路徑   資源   

一 .前言

    如果我們希望在頁面引入圖片(包括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: http://www.cnblogs.com/ghost-xyx/p/5812902.html

二 .loader中的參數

    上面提到url-loader的參數和file-loader的參數,那麼loader的參數是個什麼概念呢?loader的參數用來自訂loader處理檔案時的工作特性。下面以url-loader為例,介紹一下webpack的loader中的參數。

    首先看下面的例子:

  1. module.exports = {  
  2.     // 入口檔案路徑,__dirname是根目錄  
  3.     entry: __dirname + ‘/src/main.js‘,  
  4.     // 打包組建檔案  
  5.     output: {  
  6.         path: __dirname + ‘/output‘,  
  7.         filename: ‘main.js‘  
  8.     },  
  9.   
  10.     module: {  
  11.         rules: [  
  12.             {  
  13.                 test: /\.css$/,  
  14.                 use: [‘style-loader‘, ‘css-loader‘]  
  15.             },  
  16.             {  
  17.                 test: /\.jpeg$/,  
  18.                 use: [  
  19.                     {  
  20.                         loader: ‘url-loader‘,  
  21.                         options: {  
  22.                             limit: ‘1024‘  
  23.                         }  
  24.                     },  
  25.                 ]  
  26.             }  
  27.         ]  
  28.     }  
  29. }  

    其中,url-loader的配置中的options屬性工作表示的就是url-loader的參數,還有一種等價的寫法:

  1. {  
  2.     test: /\.jpeg$/,  
  3.     use: ‘url-loader?limit=1024  
  4. }  

    如果有多個參數,就用 ‘&’ 串連起來。和http請求中的參數類似。正如前面介紹的,limit這個參數就是告訴url-loader,在檔案小於多少個位元組時,將檔案編碼並返回DataURL。此外url-loader還有一些用於file-loader的參數。我們知道,file-loader的作用是將檔案複製到其他目錄。file-loader提供了一系列參數允許我們自訂諸如輸出檔案、檔案名稱規則、發布路徑等特性的參數。下面介紹一下這些參數。

三 .url-loader的參數

    先看下配置好的代碼:

 
  1. module.exports = {  
  2.     // 入口檔案路徑,__dirname是根目錄  
  3.     entry: __dirname + ‘/src/main.js‘,  
  4.     // 打包組建檔案  
  5.     output: {  
  6.         path: __dirname + ‘/output‘,  
  7.         filename: ‘main.js‘  
  8.     },  
  9.   
  10.     module: {  
  11.         rules: [  
  12.             {  
  13.                 test: /\.css$/,  
  14.                 use: [‘style-loader‘, ‘css-loader‘]  
  15.             },  
  16.             {  
  17.                 test: /\.jpeg$/,  
  18.                 use: ‘url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/‘,  
  19.             }  
  20.         ]  
  21.     }  
  22. }  

    這裡涉及到了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了。

四 .安裝url-loader

  1. npm install --save-dev url-loader  


五 .demo

https://github.com/KIDFUCKER/webpack-demo.git

webpack學習筆記-2-file-loader 和 url-loader

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: