我們知道握础，在Webpack中月杉，js文件類型是能夠被識別并直接打包的突倍，而其他文件類型（如CSS和圖片等）則需要通過特定的loader來進(jìn)行加載打包唯鸭。
上一節(jié)我們講到如何使用css-loader和style-loader兩個(gè)loader來打包CSS代碼，這次我將繼續(xù)講解如何使用loader將圖片類型文件進(jìn)行打包處理搀缠。
一铛楣、上節(jié)回顧
為了讓大家思路更加明朗，我還是先將上一節(jié)結(jié)束時(shí)的目錄結(jié)構(gòu)和一些關(guān)鍵文件內(nèi)容展示一下吧艺普。
webpack.config.js：
module.exports = {
entry: './src/scripts/index.js', // 打包入口
output: {
path: __dirname + '/dist', // 輸出路徑
filename: 'scripts/index.js' // 輸出文件名
},
module: {
rules: [ // 其中包含各種loader的使用規(guī)則
{
test: /\.css$/, // 正則表達(dá)式簸州，表示打包.css后綴的文件
use: ['style-loader','css-loader'] // 針對css文件使用的loader鉴竭，注意有先后順序，數(shù)組項(xiàng)越靠后越先執(zhí)行
}
]
},
watch: true // 監(jiān)聽文件改動(dòng)并自動(dòng)打包
};
index.js：
var module = require('./module.js');
require('../css/style.css');
二岸浑、圖片打包
圖片打包關(guān)鍵要用到file-loader或url-loader搏存，其中url-loader與file-loader功能基本一致，只不過url-loader能將小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理矢洲。
1. CSS中的圖片
比如璧眠，我現(xiàn)在在src目錄下新增一個(gè)images文件夾，再在images中添加一張圖片“1.jpg”读虏。然后我在style.css中添加以下代碼：
html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}
如果這時(shí)直接進(jìn)行打包责静，那么肯定會報(bào)錯(cuò)，比如像這樣的：
第三行它提示你需要使用一個(gè)loader來處理圖片這種類型的文件盖桥，這時(shí)灾螃，我們只需把file-loader裝上，并在webpack.config.js中添加相應(yīng)配置就ok了揩徊。
① 輸入命令安裝file-loader
npm i -D file-loader
② 在webpack.config.js中的rules數(shù)組中添加file-loader的相關(guān)配置
{
test: /\.(png|jpg|gif|svg)$/,
use: ['file-loader']
}
其實(shí)對于只有單個(gè)loader的腰鬼，我們還可以將其簡化成下面這樣：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader'
}
接下來，我們只需執(zhí)行npm start命令進(jìn)行打包即可塑荒。
雖然我們已經(jīng)將圖片但是打包后熄赡，我們會發(fā)現(xiàn)打包后的圖片名發(fā)生了變化：
那么如何才能保持圖片名不變，而且也能夠添加到指定目錄下呢齿税？
我們只需要再添加一個(gè)options屬性即可：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
其中name屬性其實(shí)就是圖片打包后的路徑彼硫，其中包括圖片名（[name]）和圖片格式（[ext]）。
此時(shí)打包后的dist目錄結(jié)構(gòu)如下：
2. JS中的圖片
file-loader能自動(dòng)識別CSS代碼中的圖片路徑并將其打包至指定目錄偎窘，但是JS就不同了乌助，我們來看下面的例子。
// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);
如果不使用Webpack打包陌知，正常情況下只要路徑正確圖片是能夠正常顯示的他托。然而，當(dāng)使用Webpack打包后仆葡，我們會發(fā)現(xiàn)圖片并未被成功打包到dist目錄赏参，自然圖片也無法顯示出來。
這其實(shí)是因?yàn)閃ebpack并不知道'../images/1.jpg'是一張圖片沿盅，如果要正常打包的話需要先將圖片資源加載進(jìn)來把篓，然后再將其作為圖片路徑添加至圖片對象。具體代碼如下：
// index.js
var imgSrc = require('../images/1.jpg');
var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);
3. 淺談url-loader
除了使用file-loader對圖片進(jìn)行打包處理外腰涧，我們同樣也可以使用url-loader代替韧掩，另外我們還可以對小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理。
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
這里limit屬性的作用就是將小于8192B（8.192K）大小的圖片轉(zhuǎn)成base64格式窖铡，而大于這個(gè)大小的圖片將會以file-loader的方式進(jìn)行打包處理疗锐，例如：
當(dāng)然坊谁，如果不寫limit屬性，那么url-loader就會默認(rèn)將所有圖片轉(zhuǎn)成base64滑臊。
小貼士: 當(dāng)我們配置watch為true進(jìn)行打包后口芍，Webpack會一直處于監(jiān)聽狀態(tài)，然而當(dāng)更改webpack.config.js后我們?nèi)孕枰匦逻M(jìn)行打包操作雇卷，這時(shí)我們只需在控制臺簡單的按下Ctrl+C后根據(jù)提示輸入字母y回車確定即可成功退出監(jiān)聽狀態(tài)淑掌。
本文重點(diǎn)總結(jié)
① 使用file-loader或url-loader可對圖片進(jìn)行打包操作
② url-loader可將圖片轉(zhuǎn)成base64格式
