敞开生长之旅！这是我参与「日新方案 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);
  })
};

webpack原理剖析——loader（二）

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

webpack原理剖析——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");
};

webpack原理剖析——loader（二）

履行次序

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

webpack原理剖析——loader（二）
在履行过程中假如任何一个 pitch 有回来值,loader链就会被阻断。webpack 会越过后边一切的的 pitch 和 loader，直接进入上一个 loader。
webpack原理剖析——loader（二）

常用 loader API

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

办法名 意义 用法
this.async 异步回调 loader,回来 this.callback const callback = this.async()
this.callback 能够同步或者异步调用的并回来多个成果的函数 this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema) 提取给定的 loader 选项，接受一个可选的 JSON schema 作为参数 this.getOptions(schema)
this.emitFile 发生一个文件 this.emitFile(name, content, sourceMap)
this.utils.contextify 回来一个相对路径 this.utils.contextify(context, request)
this.utils.absolutify 回来一个绝对路径 this.utils.absolutify(context, request)

小结

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