過(guò)去在 Webpack4 時(shí)，我們處理圖片資源通過(guò) file-loader 和 url-loader 進(jìn)行處理

現(xiàn)在 Webpack5 已經(jīng)將兩個(gè) Loader 功能內(nèi)置到 Webpack 里了，我們只需要簡(jiǎn)單配置即可處理圖片資源

   module: {
        rules: [
            {
                // 用來(lái)匹配 .css 結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                use: [
                    "style-loader",
                    "css-loader"
                ],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            // 圖片優(yōu)化
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                //  導(dǎo)出圖片名稱
                generator: {
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代碼不編譯
                loader: "babel-loader",
            },
        ],
    },

對(duì)圖片資源進(jìn)行優(yōu)化

將小于某個(gè)大小的圖片轉(zhuǎn)化成 data URI 形式（Base64 格式）

  parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的圖片會(huì)被base64處理
          }
        }

  • 優(yōu)點(diǎn)：減少請(qǐng)求數(shù)量
  • 缺點(diǎn)：體積變得更大

此時(shí)輸出的圖片文件就只有兩張，有一張圖片以 data URI 形式內(nèi)置到 js 中了 （注意：需要將上次打包生成的文件清空，再重新打包才有效果）