在之前的项目开发中，众所周知可以全局配置url-loader，对一些静态资源的超过设定目标转换成base64,直接打包的时候打在js文件中，能更快的响应。然在某些特定的环境，需要单独的对一些超过之前设定的目标大小，但是又不想改变全局设定，如何让特殊的某个或某几个文件也能变成base64......在这就介绍下uel-loader的一些不常用的“行内”引用的模式。

安装

npm i url-loader file-loader -D

全局配置

{
    test: /\.(jpg|jpeg|webp|png|svg|gif|woff|woff2|eot|ttf|otf)$/,
    exclude: /(node_modules|bower_components)/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
                name: '[path][name].[ext]',
            },
        },
    ],
}

“行内”的用法（可能表述的有歧义）

url-loader的一些用法

require("url-loader?limit=10000!./file.png");
// => 如果 "file.png" 大小小于 10kb 将返回 DataUrl

require("url-loader?mimetype=image/png!./file.png");
// => 指定文件的 mimetype（否则会用文件后缀推测）

require("url-loader?prefix=img/!./file.png");
// => file-loader 的参数也有效，如果被使用它们将被传递给 file-loader

主要介绍下和普通canvas转换base64的区别

//普通的通过canvas转换成base64
/**
 * canvas压缩图片 
 * @param {string} path 图片文件的路径
 * @param {object} obj 压缩对象的参数如   { maxSide: 1280, quality: 0.8, maxSize: 300 }
 */
const canvasDataURL = (path, obj) => {
    let img = document.createElement('img');
    img.src = path;
    img. function () {
        let that = this;
        // 默认按比例压缩
        let w = that.width,
            h = that.height,
            scale = w / h;
        if (w > h) { //横屏的时候
            //传递的宽度固定 1280 ， 如果原始宽度大于1280的才适配
            if (obj.maxSide && obj.maxSide < w) {
                w = obj.maxSide;
            }
            h = obj.height || (w / scale);
        } else {  //竖屏的时候
            //传递的最大边宽度固定 1280 ， 如果原始高度度大于1280的才适配
            if (obj.maxSide && obj.maxSide < h) {
                h = obj.maxSide;
            }
            w = obj.width || (h * scale);
        }
        let quality = 0.8;  // 默认图片质量为0.8
        //生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        // 创建属性节点
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        return canvas.toDataURL('image/jpeg', quality);
    }
}
//通过url-loader行内引用快速转换base64
//是不是非常方便，只需一行代码搞定，这是把10kb以内的图片转成成base64
const testBase64 = requier('!!url-loader?limit=10000!@/assets/images/test.png');

以上是webpack之url-loader快速转换Base64分享, 如果你是前端工程师同学，欢迎试用体验【webfunny监控系统】。