1.前言

如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開(kāi)發(fā)時(shí)，引入圖片會(huì)遇到一些問(wèn)題。

其中一個(gè)就是引用路徑的問(wèn)題。拿background樣式用url引入背景圖來(lái)說(shuō)，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

另外，如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

url-loader和file-loader是什么關(guān)系呢？簡(jiǎn)答地說(shuō)，url-loader封裝了file-loader。url-loader不依賴(lài)于file-loader，即使用url-loader時(shí)，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。通過(guò)上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)，url-loader將會(huì)把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理，參數(shù)也會(huì)直接傳給file-loader。因此我們只需要安裝url-loader即可。

推薦文檔：

file-loader: https://github.com/webpack-contrib/file-loader

url-loader: http://www.dhdzp.com/article/122936.htm

2.loader中的參數(shù)

上面提到url-loader的參數(shù)和file-loader的參數(shù)，那么loader的參數(shù)是個(gè)什么概念呢？loader的參數(shù)用來(lái)自定義loader處理文件時(shí)的工作特性。下面以u(píng)rl-loader為例，介紹一下webpack的loader中的參數(shù)。

首先看下面的例子：

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的參數(shù)，還有一種等價(jià)的寫(xiě)法：

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

如果有多個(gè)參數(shù)，就用 ‘&' 連接起來(lái)。和http請(qǐng)求中的參數(shù)類(lèi)似。正如前面介紹的，limit這個(gè)參數(shù)就是告訴url-loader，在文件小于多少個(gè)字節(jié)時(shí)，將文件編碼并返回DataURL。此外url-loader還有一些用于file-loader的參數(shù)。我們知道，file-loader的作用是將文件復(fù)制到其他目錄。file-loader提供了一系列參數(shù)允許我們自定義諸如輸出文件、文件名規(guī)則、發(fā)布路徑等特性的參數(shù)。下面介紹一下這些參數(shù)。

3.url-loader的參數(shù)

先看下配置好的代碼：

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個(gè)參數(shù)：limit、name、outputPath、publicPath。其中l(wèi)imit已經(jīng)說(shuō)明過(guò)。file-loader相關(guān)的是name、outputPath和publicPath。下面解釋一下這3個(gè)參數(shù)

name表示輸出的文件名規(guī)則，如果不添加這個(gè)參數(shù)，輸出的就是默認(rèn)值：文件哈希。加上[path]表示輸出文件的相對(duì)路徑與當(dāng)前文件相對(duì)路徑相同，加上[name].[ext]則表示輸出文件的名字和擴(kuò)展名與當(dāng)前相同。加上[path]這個(gè)參數(shù)后，打包后文件中引用文件的路徑也會(huì)加上這個(gè)相對(duì)路徑。

outputPath表示輸出文件路徑前綴。圖片經(jīng)過(guò)url-loader打包都會(huì)打包到指定的輸出文件夾下。但是我們可以指定圖片在輸出文件夾下的路徑。比如outputPath=img/，圖片被打包時(shí)，就會(huì)在輸出文件夾下新建（如果沒(méi)有）一個(gè)名為img的文件夾，把圖片放到里面。

publicPath表示打包文件中引用文件的路徑前綴，如果你的圖片存放在CDN上，那么你上線時(shí)可以加上這個(gè)參數(shù)，值為CDN地址，這樣就可以讓項(xiàng)目上線后的資源引用路徑指向CDN了。

4.安裝url-loader

npm install --save-dev url-loader

5.demo

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。