Loader 接口

/**
 *
 * @param {string|Buffer} content 资源文件的内容
 * @param {object} [map] 可被 https://github.com/mozilla/source-map 消费的 SourceMap 数据
 * @param {any} [meta] 元数据，可以是任何内容
 */
function webpackLoader(content, map, meta) {
  // 你的 webpack loader 代码
}

export default function syncLoader(content, map, meta) {
  return someSyncOperation(content);
}

export default function syncLoaderWithMultipleResults(content, map, meta) {
  this.callback(null, someSyncOperation(content), map, meta);
  return; // 调用 callback() 时始终返回 undefined
}

export default async function asyncLoader(content, map, meta) {
  const result = await someAsyncOperation(content);
  return result;
}

export default function asyncLoaderWithCallback(content, map, meta) {
  const callback = this.async();
  someAsyncOperation(content, (err, result) => {
    if (err) return callback(err);
    callback(null, result, map, meta);
  });
}

export default function asyncLoaderWithMultipleResults(content, map, meta) {
  const callback = this.async();
  someAsyncOperation(content, (err, result, sourceMaps, meta) => {
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
}

export default function rawLoader(content) {
  assert(content instanceof Buffer);
  return someSyncOperation(content);
  // 返回值也可以是 `Buffer`
  // 即使 loader 不是 "raw" 类型也允许
}
export const raw = true;

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        use: ["a-loader", "b-loader", "c-loader"],
      },
    ],
  },
};

|- a-loader `pitch`
  |- b-loader `pitch`
    |- c-loader `pitch`
      |- 请求的模块被作为依赖拾取
    |- c-loader 正常执行
  |- b-loader 正常执行
|- a-loader 正常执行

export default function myLoaderName(content) {
  return someSyncOperation(content, this.data.value);
}

export function pitch(remainingRequest, precedingRequest, data) {
  data.value = 42;
}

export default function myLoaderName(content) {
  return someSyncOperation(content);
}

export function pitch(remainingRequest, precedingRequest, data) {
  if (someCondition()) {
    return `import _from_loader from "${JSON.stringify(`-!${remainingRequest}`)}"; export default _from_loader;`;
  }
}

|- a-loader `pitch`
  |- b-loader `pitch` 返回一个模块
|- a-loader 正常执行

import "./loader1?xyz!loader2!./resource?rrr";

addContextDependency(directory: string)

addDependency(file: string)
dependency(file: string) // 快捷方式

addMissingDependency(file: string)

cacheable(flag = true: boolean)

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
);

clearDependencies();

emitError(error: Error)

ERROR in ./src/lib.js (./src/loader.js!./src/lib.js)
Module Error (from ./src/loader.js):
Here is an Error!
 @ ./src/index.js 1:0-25

emitFile(name: string, content: Buffer|string, sourceMap: {...})

emitWarning(warning: Error)

WARNING in ./src/lib.js (./src/loader.js!./src/lib.js)
Module Warning (from ./src/loader.js):
Here is a Warning!
 @ ./src/index.js 1:0-25

{
  // 环境支持箭头函数 ('() => { ... }')。
  "arrowFunction": true,
  // 环境支持 BigInt 字面量 (123n)。
  "bigIntLiteral": false,
  // 环境支持使用 const 和 let 进行变量声明。
  "const": true,
  // 环境支持解构 ('{ a, b } = obj')。
  "destructuring": true,
  // 环境支持异步 import() 函数来导入 EcmaScript 模块。
  "dynamicImport": false,
  // 环境支持在创建 worker 时使用异步 import()，目前仅适用于 web 目标。
  "dynamicImportInWorker": false,
  // 环境支持 'for of' 迭代 ('for (const x of array) { ... }')。
  "forOf": true,
  // 环境支持 'globalThis'。
  "globalThis": true,
  // 环境支持使用 ECMAScript Module 语法导入 ECMAScript 模块 (import ... from '...')。
  "module": false,
  // 环境支持可选链 ('obj?.a' 或 'obj?.()')。
  "optionalChaining": true,
  // 环境支持模板字面量。
  "templateLiteral": true
}

getResolve(options: ResolveOptions): resolve

resolve(context: string, request: string, callback: function(err, result: string))
resolve(context: string, request: string): Promise<string>

export default function (source) {
  console.log(this.hot); // 如果通过 --hot 标志或 webpack 配置启用了 HMR，则为 true
  return source;
}