webpack4.x为图片资源配置base64编码规范

Bertha 。 2022-04-16 00:19 312阅读 0赞

webpack可以通过url-loader（file-loader）来完成对符合要求图片资源进行base64编码转换的功能。

参考文档：[http://www.cnblogs.com/coco1s/p/4375774.html][http_www.cnblogs.com_coco1s_p_4375774.html]

下面直接上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请求。

[http_www.cnblogs.com_coco1s_p_4375774.html]: http://www.cnblogs.com/coco1s/p/4375774.html