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: http://www.cnblogs.com/ghost-xyx/p/5812902.html

2.loader中的引數

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

    首先看下面的例子：

[javascript]  view plain  copy

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的引數，還有一種等價的寫法：
[javascript]  view plain  copy

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

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

3.url-loader的引數

    先看下配置好的程式碼：

[javascript]  view plain  copy

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了。

4.安裝url-loader

[plain]  view plain  copy

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