编写 webpack Loader

loader 类型

1. pre
2. post
3. normal
4. inline 行内 loader

1、2、3 通过修改 loader 的 enforce 配置项

{
  test: /\.js/,
  use: "xx-loader",
  enforce: "pre"
};

执行顺序为：pre -> post -> normal -> inline

行内 loader

格式：

require("[前缀][loader 名称]![文件名称]")

require("-!inline-loader!./a.js");

前缀	意义
-!	不执行 pre 和 normal ，只有 inline 和 post
!	不执行 noraml，只有 pre + inline + post
!!	执行下 inline-loader

loader 执行过程

• pitch 的顺序是配置的从上到下，从左到右
• function 的顺序是配置的从下到上，从右到左

const loader = function (source) {
  // format source
  return source;
};
// 定义pitch过程
loader.pitch = function () {
  // do something
  return code | undefind;
};

1. pitch loader 过程

   获取资源之前执行，可以阻断后面的 loader 执行。若返回不为空，则直接跳过后面 loader pitch 及他们的 normal 过程，以及获取资源的步骤

2. normal

   获取资源之后正常执行 loader function

loader 执行顺序.png

参考

webpack loader 官方参考