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

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

一 .前言

    如果我們希望在頁面引入圖片（包括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