敞开生长之旅！这是我参与「日新方案 12 月更文应战」的第22天，点击查看活动概况

前语

这一篇首要写了loader的分类以及一些常用的loader API

loader 分类

loader首要有四种分别为:同步loader,异步loader,Raw Loader,Pitching Loader,具体写法如下！

同步 loader

办法一

module.exports = function loader(content) {
  console.log("这是我的第一个loader");
  return content;
};

办法二

通过this.callback办法,这个办法能够接收4个参数,写法如下:

/**
 * callback接受的参数
 * 第一个参数为err,有过错为过错，没有即为null
 * 第二个参数为content，处理后的内容
 * 第三个参数传递source-map
 * 第四个参数为meat,给其他的loader传递的参数
 */
module.exports = function (content, map, meta) {
  this.callback(null, content, map, meta);
};

用第二种写法的能够更好地将参数传递下去，便利接下来的loader继续进行处理，所以当需求多个loader处理一个文件时更推荐用第二种写法！

异步 loader

module.exports = function (content, map, meta) {
  const callback = this.async();
  // 进行异步操作
  setTimeout(() => {
    callback(null, content, map, meta);
  }, 1000);
};

tips

如下，同步loader中是不能够履行异步操作的,由于同步loader不会等候异步操作完成之后再往下履行,当同步操作完成之后就表明callback被调用了,如此再次调用就会报错！

module.exports = function (content, map, meta) {
  setTimeout(() => {
    this.callback(null, content, map, meta);
  })
};

Raw Loader

Raw Loader写法如下,它能够履行异步操作，也能够履行同步操作,首要就是需求在暴露时增加一个特点raw = true,Raw Loader接收到的content为Buffer数据流,首要用于处理图片、字体图标等运用！

module.exports = function (content) {
  // content是一个Buffer数据
  console.log(content);
  return content;
};
module.exports.raw = true; // 敞开 Raw Loader

Pitching Loader

写法如下,首要是需求在暴露的目标中增加一个pich办法,pich办法会在loader履行之前履行,履行次序如下图!

module.exports = function (content) {
  console.log("loader");
  return content;
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
  console.log("pich");
};

履行次序

loader是从右到左从下到上履行,pich办法是从左到右从上到下履行。所以webpack会按次序先去履行loader链中的pich办法(有就履行，没有越过),在依照次序履行loader!

常用 loader API

下面是一些常用的loader API，更多的loader API能够参阅官方文档

小结

通过上面的学习,学会了四种loader的用法以及一下loader API,接下来就开端要学习写一些loader了,等待！