webpack file-loader和url-loader的區別

2019-11-19 12:17:30

字體：大中小

來源：轉載

供稿：網友

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即可。

url-loader: http://www.49028c.com/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