webpack之url-loader快速转换Base64

前言：在之前的项目开发中，众所周知可以全局配置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.p