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

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

参考文档：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请求。