首先，我理解的file-loader(此处指针对图片)是这样的，在js中以相对路径引用图片时，如果不将图片打包到dist目录中，那么打包后的js是找不到图片的，因此需要将图片也复制到dist中，但是类似图片这种的，它是二进制文件因此会涉及到“读和写”两个操作，file-loader的用处就是将读出来的文件写到dist目录中，同时文件名是根据读到的二进制文件以MD5的形式生成的。因此我们看到生成的图总是以一串数字字母组合形成的文件名。
//webpack.config.js
{
test: /\.(png|jpg)$/,
//目的就是根据图片生成一个MD5 然后输出到dist目录下，file-loader还会返回当前的图片路径
use: "file-loader"
}
// 新建file-loader.js
let loaderUtils = require("loader-utils");
function loader(source) {
//
let filename = loaderUtils.interpolateName(this, '[hash].[ext]', {content: source}) // 根据内容生成一个[hash].[ext]的文件
this.emitFile(filename, source); // 发射文件
return `module.exports="./dist/${filename}"`; //因为生成的图片在dist目录下
}
loader.raw = true;
module.exports = loader;
执行：
image.png
完成！！！
接下来，我们来完成url-loader
url-loader第一步，会先处理路径（使用file-loader），然后，它有options可以配置一些因文件大小而不同的结果...
//webpack.config.js
{
test: /\.(png|jpg)$/,
use: {
loader: "url-loader",
options: {
limit: 200 * 1024
}
}
}
//新建url-loader.js
let loaderUtils = require("loader-utils");
let mime = require("mime"); // 这个插件可以拿到文件类型（不是后缀）
function loader(source) {
let { limit } = loaderUtils.getOptions(this); //拿到用户设置的最小值
if (limit && limit > source.length) { // 比大小
return `module.exports="data:${mime.getType( //这里data:${mime.getType(这里传的是文件绝对路径)}是base64固定写法，常见的比如“data:image/png,data:image/jpeg”...
this.resourcePath
)};base64,${source.toString("base64")}"`; //转换为base64
} else {
return require("./file-loader").call(this, source); // 不在范围内的话，就执行file-loader，并且将源码传入
}
return source;
}
loader.raw = true; //字符串转二进制
module.exports = loader;
执行：
image.png
