实现file-loader和url-loader

首先，我理解的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