Loader

先來(lái)看一下官方文檔中對(duì)于Loader解釋

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.
默認(rèn)情況下，webpack只能理解和打包Javascript和JSON文件，通過(guò)使用Loaders，允許webpack將不同格式的文件轉(zhuǎn)換能夠被你的應(yīng)用所使用的成有效的模塊，并添加到依賴中。

使用file-laoder打包圖片文件

文件結(jié)構(gòu)：（/source_code/03/03-01）

• dist
  • index.html
    -images
  • avatar.jpg
• src
  • index.js
• webpack.config.js

文件內(nèi)容

• src/index.js

import avatar from '../images/avatar.jpg'
let img = new Image()
img.src = avatar
img.width = 200

let root = document.getElementById('root')
root.appendChild(img)

• webpack.config.js

const path = require('path')

module.exports = {
  // 定義入口文件
  entry: path.resolve(__dirname, "src/index.js"),
  // 定義打包后輸入的文件 
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /\.jpg$/, // 使用file-loader打包jpg文件
      use: 'file-loader'
    }]
  }
}

執(zhí)行npm run bundle進(jìn)行打包，可以看到在dist目錄中除了打包生成了bundle.js以外，還生成了一個(gè)60b6e2a03de866e096a5d3478e982781.jpg文件。那么我們來(lái)分析一下webpack使用file-load做了哪些工作：

1. 首先當(dāng)webpack編譯打包項(xiàng)目的時(shí)候，根據(jù)配置，當(dāng)他遇到使用.jpg之類的圖片文件的時(shí)候，他會(huì)先將圖片移動(dòng)動(dòng)打包輸出的目錄中(dist)。
2. 根據(jù)配置，對(duì)圖片文件進(jìn)行重命名。并且得到圖片相對(duì)于dist目錄的名稱，并將這個(gè)名稱作為返回值，返回到引入這個(gè)圖片的變量之中。

通過(guò)上面的兩個(gè)步驟，我們就能夠在我們的項(xiàng)目中，引入jpg作為模塊使用了。
通過(guò)上面的示例我們要知道，一旦在我們的項(xiàng)目中引入非js或者json文件的時(shí)候，我們首先就要想到使用loader來(lái)對(duì)其進(jìn)行打包。

其他配置項(xiàng)

使用上面的配置，我們發(fā)現(xiàn)圖片的名字在打包之后變成了一個(gè)很長(zhǎng)的名字，如果我們想保持圖片的名字不變，這個(gè)時(shí)候我們就需要進(jìn)行一些額外的配置了。

• 修改webpack.config.js（/source/03/03-01/webpack.config.1.js）

const path = require('path')

module.exports = {
  // 定義入口文件
  entry: path.resolve(__dirname, "src/index.js"),
  // 定義打包后輸入的文件 
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'  //FIXME: 增加關(guān)于輸出文件名的配置
          outputPath: 'images/'
          //FIXME: 增加關(guān)于輸出文件目錄的配置
        }
      }
    }]
  }
}

通過(guò)我們以上的配置，再次進(jìn)行打包。這時(shí)我們看到dist中輸出的圖片文件名稱，就和源文件一致了。
name: '[name].[ext]'這種語(yǔ)法，我們稱之為占位符，類似的占位符，在webpack中常用的還有：

• [hash]：使用md5生成的hash值

url-loader打包圖片

在使用url-loader打包文件的時(shí)候，他和file-loader的機(jī)制不同，他并不會(huì)將文件復(fù)制到dist目錄，而是將圖片文件轉(zhuǎn)換成base64，插入到目標(biāo)文件中。

• 使用npm i url-loader -D，安裝url-loader
• 更改webpack.config.js的相關(guān)代碼（/source_code/03/03-01/webpack.config.2.js）

const path = require('path')

module.exports = {
  // 定義入口文件
  entry: path.resolve(__dirname, "src/index.js"),
  // 定義打包后輸入的文件 
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: 'url-loader'
      }
    }]
  }
}

• 執(zhí)行npm run bundle進(jìn)行打包

但是這種使用方式會(huì)帶來(lái)一個(gè)問題，如果我們引入的是一個(gè)比較大的圖片的話，那么使用這種方式，會(huì)使我們的目標(biāo)文件變得很大，從而降低加載速度。為了避免這個(gè)問題，我們需要配置額外的參數(shù)

//...
module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048 // 2KB
        }
      }
    }]
  }
//...

上面的配置的意義為：當(dāng)圖片文件大于limit設(shè)置的2KB的時(shí)候，他會(huì)使用根據(jù)name和outputPath的選項(xiàng)將文件打包復(fù)制到輸出目錄中，如果小于的話，他會(huì)使用base64的形式，將其注入到引入他的變量中

• 參考資料
  • webpack官方文檔：file-loader
  • webpack官方文檔：url-loader