我們知道，在Webpack中，js文件類型是能夠被識(shí)別并直接打包的，而其他文件類型（如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)容展示一下吧。

目錄結(jié)構(gòu)

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']   // 針對(duì)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)行打包，那么肯定會(huì)報(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í)對(duì)于只有單個(gè)loader的，我們還可以將其簡(jiǎn)化成下面這樣：

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader'
}

接下來，我們只需執(zhí)行npm start命令進(jìn)行打包即可。

雖然我們已經(jīng)將圖片但是打包后，我們會(huì)發(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)識(shí)別CSS代碼中的圖片路徑并將其打包至指定目錄，但是JS就不同了，我們來看下面的例子。

// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);

如果不使用Webpack打包，正常情況下只要路徑正確圖片是能夠正常顯示的。然而，當(dāng)使用Webpack打包后，我們會(huì)發(fā)現(xiàn)圖片并未被成功打包到dist目錄，自然圖片也無法顯示出來。

這其實(shí)是因?yàn)閃ebpack并不知道'../images/1.jpg'是一張圖片，如果要正常打包的話需要先將圖片資源加載進(jìn)來，然后再將其作為圖片路徑添加至圖片對(duì)象。具體代碼如下：

// index.js
var imgSrc = require('../images/1.jpg');

var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

3. 淺談url-loader

除了使用file-loader對(duì)圖片進(jìn)行打包處理外，我們同樣也可以使用url-loader代替，另外我們還可以對(duì)小于某個(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è)大小的圖片將會(huì)以file-loader的方式進(jìn)行打包處理，例如：

當(dāng)然，如果不寫limit屬性，那么url-loader就會(huì)默認(rèn)將所有圖片轉(zhuǎn)成base64。

小貼士: 當(dāng)我們配置watch為true進(jìn)行打包后，Webpack會(huì)一直處于監(jiān)聽狀態(tài)，然而當(dāng)更改webpack.config.js后我們?nèi)孕枰匦逻M(jìn)行打包操作，這時(shí)我們只需在控制臺(tái)簡(jiǎn)單的按下Ctrl+C后根據(jù)提示輸入字母y回車確定即可成功退出監(jiān)聽狀態(tài)。

本文重點(diǎn)總結(jié)

① 使用file-loader或url-loader可對(duì)圖片進(jìn)行打包操作
② url-loader可將圖片轉(zhuǎn)成base64格式