Webpack輕鬆入門（三）——圖片打包

我們知道，在Webpack中，js檔案型別是能夠被識別並直接打包的，而其他檔案型別（如CSS和圖片等）則需要通過特定的loader來進行載入打包。

上一節我們講到如何使用css-loader和style-loader兩個loader來打包CSS程式碼，這次我將繼續講解如何使用loader將圖片型別檔案進行打包處理。

一、上節回顧

為了讓大家思路更加明朗，我還是先將上一節結束時的目錄結構和一些關鍵檔案內容展示一下吧。

webpack.config.js：

module.exports = {
    entry: `./src/scripts/index.js`,   // 打包入口
    output: {
        path: __dirname + `/dist`,    // 輸出路徑
        filename: `scripts/index.js`     // 輸出檔名
    },
    module: {
        rules: [    // 其中包含各種loader的使用規則
            {
                test: /.css$/,  // 正規表示式，表示打包.css字尾的檔案
                use: [`style-loader`,`css-loader`]   // 針對css檔案使用的loader，注意有先後順序，陣列項越靠後越先執行
            }
        ]
    },
    watch: true    // 監聽檔案改動並自動打包
};

index.js：

var module = require(`./module.js`);
require(`../css/style.css`);

二、圖片打包

圖片打包關鍵要用到file-loader或url-loader，其中url-loader與file-loader功能基本一致，只不過url-loader能將小於某個大小的圖片進行base64格式的轉化處理。

1. CSS中的圖片

比如，我現在在src目錄下新增一個images資料夾，再在images中新增一張圖片“1.jpg”。然後我在style.css中新增以下程式碼：

html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}

如果這時直接進行打包，那麼肯定會報錯，比如像這樣的：

第三行它提示你需要使用一個loader來處理圖片這種型別的檔案，這時，我們只需把file-loader裝上，並在webpack.config.js中新增相應配置就ok了。

① 輸入命令安裝file-loader

npm i -D file-loader

② 在webpack.config.js中的rules陣列中新增file-loader的相關配置

{
    test: /.(png|jpg|gif|svg)$/,
    use: [`file-loader`]
}

其實對於只有單個loader的，我們還可以將其簡化成下面這樣：

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

接下來，我們只需執行npm start命令進行打包即可。

雖然我們已經將圖片但是打包後，我們會發現打包後的圖片名發生了變化：

那麼如何才能保持圖片名不變，而且也能夠新增到指定目錄下呢？

我們只需要再新增一個options屬性即可：

{
    test: /.(png|jpg|gif|svg)$/,
    loader: `file-loader`,
    options: {
        name: `images/[name].[ext]`
    }
}

其中name屬性其實就是圖片打包後的路徑，其中包括圖片名（[name]）和圖片格式（[ext]）。

此時打包後的dist目錄結構如下：

2. JS中的圖片

file-loader能自動識別CSS程式碼中的圖片路徑並將其打包至指定目錄，但是JS就不同了，我們來看下面的例子。

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

如果不使用Webpack打包，正常情況下只要路徑正確圖片是能夠正常顯示的。然而，當使用Webpack打包後，我們會發現圖片並未被成功打包到dist目錄，自然圖片也無法顯示出來。

這其實是因為Webpack並不知道`../images/1.jpg`是一張圖片，如果要正常打包的話需要先將圖片資源載入進來，然後再將其作為圖片路徑新增至圖片物件。具體程式碼如下：

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

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

3. 淺談url-loader

除了使用file-loader對圖片進行打包處理外，我們同樣也可以使用url-loader代替，另外我們還可以對小於某個大小的圖片進行base64格式的轉化處理。

{
    test: /.(png|jpg|gif|svg)$/,
    loader: `url-loader`,
    options: {
        name: `./images/[name].[ext]`,
        limit: 8192
    }
}

這裡limit屬性的作用就是將小於8192B（8.192K）大小的圖片轉成base64格式，而大於這個大小的圖片將會以file-loader的方式進行打包處理，例如：

當然，如果不寫limit屬性，那麼url-loader就會預設將所有圖片轉成base64。

小貼士: 當我們配置watch為true進行打包後，Webpack會一直處於監聽狀態，然而當更改webpack.config.js後我們仍需要重新進行打包操作，這時我們只需在控制檯簡單的按下Ctrl+C後根據提示輸入字母y回車確定即可成功退出監聽狀態。

本文重點總結

① 使用file-loader或url-loader可對圖片進行打包操作
② url-loader可將圖片轉成base64格式