webpack可以通過url-loader（file-loader）來完成對符合要求圖片資源進行base64編碼轉換的功能。

下面直接上webpack.config（即通過url-loader的limit配置項來完成，單位byte，大於limit的圖片資源會進行base64編碼轉換）：

const path = require("path");

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/build/",
        filename: "[name].js"
    },
    module: {
        rules: [
           {
                test: /\.(gif|png|jpg|woff|svg|ttf|eot)$/ ,
                use:[{
                    loader:'url-loader',
                    options: {
                        limit:500,
                        outputPath: 'images/',
                        name:'[name].[ext]'
                    }
                }]
            }
        ]
    },
    devtool: 'inline-source-map',
    mode: 'development',
    plugins: []
};

 

這樣每次構建時webpack都會自動對符合規則的圖片資源進行base64編碼轉換。

下面補充一點對base64編碼的理解：

1. 圖片資源進行base64編碼轉換並不能壓縮檔案（反而會略有增加）；
2. 只有較小的圖片資源適合進行base64編碼轉換，因為進行base64編碼轉換的圖片資源往往是放在css中，過大的圖片資源轉換後會導致css檔案膨脹，進而影響頁面載入效率（css會阻塞頁面的渲染，而圖片則不會），而較小的圖片轉換後雖然css大小略有增加，但可以減少一個http請求。