Webpack4 學習筆記 - 02：loader 打包靜態資源（圖片）

什麼是 loader？

看官網的解釋：loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

下面就經過例子來演示。

向src文件夾中添加一張圖片 triss.jpg：

而後修改index.js文件中的代碼：

import triss from './triss.jpg';

var img = new Image();
img.src = triss;

var root = document.getElementById('root');
root.append(img);

運行 npm run bundle 來打包，會發現報錯了：

錯誤提示說 triss.jpg 這個文件打包出了問題，這是由於 webpack 只能處理 js 文件，遇到 jpg 文件，它就懵逼了，不知道該怎麼處理，而後就報錯。想讓它處理非 js 文件該怎麼辦呢？這就要用到 loader 了！

使用 loader

webpack 不知道怎麼處理 jpg 文件，咱們就經過配置項來告訴它怎麼處理，修改 webpack.config.js 文件以下：

const path = require('path'); // 獲得的path爲webpack.config.js所在的目錄

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/, // webpack遇到.jpg|.png|.gif結尾的文件，就求助於url-loader來幫忙打包
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]', // 原文件名 原後綴
                    outputPath: 'images/', // 輸出路徑爲  dist目錄下的images目錄
                    limit: 2048 // 設置2048個字節，當圖片大小超過該值，輸出圖片文件，當圖片大小小於該值，以base64編碼的形式輸出圖片
                }
            }
        }]
    },
    mode: 'development'
}

新增一個 module，配置規則 rules，寫法是固定的，可查看官網文檔。這裏使用 url-loader 來打包圖片文件，具體的配置看代碼註釋，寫好配置規則以後，安裝 url-loader：

npm install url-loader -D

接着運行命令執行打包，就會看到在 dist 目錄下建立了一個 images 目錄，triss.jpg 也被打包了進來：

打開 index.html 查看：

能夠看到，圖片正確的顯示出來了，到此爲止，這一個使用loader的列子就成功了。