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)用所使用的成有效的模塊邑滨，并添加到依賴(lài)中钱反。
使用file-laoder打包圖片文件
文件結(jié)構(gòu)：（/source_code/03/03-01）
- dist
- index.html
-images - avatar.jpg
- index.html
- 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做了哪些工作：
- 首先當(dāng)webpack編譯打包項(xiàng)目的時(shí)候蹲坷，根據(jù)配置，當(dāng)他遇到使用
.jpg之類(lèi)的圖片文件的時(shí)候，他會(huì)先將圖片移動(dòng)動(dòng)打包輸出的目錄中(dist)县匠。 - 根據(jù)配置撒轮，對(duì)圖片文件進(jìn)行重命名。并且得到圖片相對(duì)于
dist目錄的名稱(chēng)兰粉，并將這個(gè)名稱(chēng)作為返回值顶瞳，返回到引入這個(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中輸出的圖片文件名稱(chēng)跟啤，就和源文件一致了隅肥。
name: '[name].[ext]'這種語(yǔ)法，我們稱(chēng)之為占位符泛啸，類(lèi)似的占位符秃症，在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è)問(wèn)題患久，如果我們引入的是一個(gè)比較大的圖片的話(huà)，那么使用這種方式返帕，會(huì)使我們的目標(biāo)文件變得很大荆萤，從而降低加載速度。為了避免這個(gè)問(wèn)題偏竟，我們需要配置額外的參數(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à)，他會(huì)使用base64的形式，將其注入到引入他的變量中
