webpack4源码学习(4)--生成module流程

3. `buildModule`方法会执行 NormalModule.js 里面的 `build` 方法, 设置一些属性后，直接调用了 `this.doBuild`,执行`runLoaders`方法，来自模块loader-runner  

4. `loader-runner`模块：[学习参考：可鱼不是鱼](https://juejin.im/post/5e1c94595188254e35125019)  

```js
// runLoaders -> iteratePitchingLoaders（按正序 require 每个 loader） -> loadLoader（对应的 loader 导出的函数赋值到 loaderContext.loader[i].normal、pitch函数，然后执行pitch函数（如果有的话）） -> processResource（转换 buffer 和设置 loaderIndex） -> iterateNormalLoaders（倒序执行所有 loader）-> runSyncOrAsync（同步或者异步执行 loader）

// 这里的递归由于都是尾递归，所以在性能上不会有问题

// 该方法按正序 require 每个 loader
function iteratePitchingLoaders(options, loaderContext, callback) {
  // abort after last loader 读取所有 loader 后，执行 processResource 方法
  if (loaderContext.loaderIndex >= loaderContext.loaders.length) return processResource(options, loaderContext, callback);

  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex]; //选择第一个  loader

  // iterate 增序后递归读取下一个 loader
  if (currentLoaderObject.pitchExecuted) {
    loaderContext.loaderIndex++;
    return iteratePitchingLoaders(options, loaderContext, callback);
  }

  // loadLoader函数定义loadLoader.js里面，主要是通过 var module = require(loader.path) 加载该 loader 模块，把 module 赋值到 loader.normal, pitch 赋值到 loader.pitch
  // 对应的 loader 导出的函数赋值到 loaderContext.loader[].normal
  loadLoader(currentLoaderObject, function(err) {
    if (err) {
      loaderContext.cacheable(false);
      return callback(err);
    }
    var fn = currentLoaderObject.pitch; //loadLoader 里会把 module 赋值到 loader.normal, pitch 赋值到 loader.pitch
    currentLoaderObject.pitchExecuted = true;
    if (!fn) return iteratePitchingLoaders(options, loaderContext, callback);

    // 如果有的话，开始执行 pitch 函数，根据参数情况决定是否继续读取剩下的loader
    runSyncOrAsync(fn, loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, (currentLoaderObject.data = {})], function(err) {
      if (err) return callback(err);
      var args = Array.prototype.slice.call(arguments, 1);
      if (args.length > 0) {
        loaderContext.loaderIndex--;
        iterateNormalLoaders(options, loaderContext, args, callback);
      } else {
        iteratePitchingLoaders(options, loaderContext, callback);
      }
    });
  });
}

// 转换 buffer 和设置 loaderIndex
function processResource(options, loaderContext, callback) {
  // set loader index to last loader 获取最后一个 loader 的 index
  loaderContext.loaderIndex = loaderContext.loaders.length - 1;

  var resourcePath = loaderContext.resourcePath;
  if (resourcePath) {
    loaderContext.addDependency(resourcePath);
    // 转换为 buffer
    options.readResource(resourcePath, function(err, buffer) {
      if (err) return callback(err);
      options.resourceBuffer = buffer; //得到buffer
      iterateNormalLoaders(options, loaderContext, [buffer], callback);
    });
  } else {
    iterateNormalLoaders(options, loaderContext, [null], callback);
  }
}

//倒序执行所有 loader
function iterateNormalLoaders(options, loaderContext, args, callback) {
  if (loaderContext.loaderIndex < 0) return callback(null, args); //执行完所有 loader 后退出，去执行 iteratePitchingLoaders 回调即 runLoaders 的回调

  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex]; //获取对应 loader

  // iterate 减序后递归执行下一个 loader
  if (currentLoaderObject.normalExecuted) {
    loaderContext.loaderIndex--;
    return iterateNormalLoaders(options, loaderContext, args, callback);
  }

  var fn = currentLoaderObject.normal;
  currentLoaderObject.normalExecuted = true;
  if (!fn) {
    return iterateNormalLoaders(options, loaderContext, args, callback);
  }

  convertArgs(args, currentLoaderObject.raw);

  //执行 loader 函数
  runSyncOrAsync(fn, loaderContext, args, function(err) {
    //loader 执行结果的回调
    if (err) return callback(err);

    var args = Array.prototype.slice.call(arguments, 1); // arg:[] 为 loader 转换结果（字符串或者buffer+可能有的sourcemap）
    iterateNormalLoaders(options, loaderContext, args, callback); //递归，并将转换结果一并传入
  });
}

//同步或者异步执行 loader 函数
function runSyncOrAsync(fn, context, args, callback) {
  var isSync = true;
  var isDone = false;
  var isError = false; // internal error
  var reportedError = false;
  //异步处理（调用的话，会改变isSync值，从而可以走异步方法）
  // context.async 是一个闭包函数，它返回的是 innerCallback，而 innerCallback 内部才是真正执行 runSyncOrAsync 的 callback 函数，这个 callback 会进入下一次的 iterateNormalLoaders 逻辑
  context.async = function async() {
    if (isDone) {
      if (reportedError) return; // ignore
      throw new Error('async(): The callback was already called.');
    }
    isSync = false;
    return innerCallback;
  };
  // 异步后会执行此方法，loader 的结果会作为参数传导出来
  var innerCallback = (context.callback = function() {
    if (isDone) {
      if (reportedError) return; // ignore
      throw new Error('callback(): The callback was already called.');
    }
    isDone = true;
    isSync = false;
    try {
      callback.apply(null, arguments); // arguments 为 loader 结果，第一个值为 null 第二个为字符串或者 buffer，第三个为 SourceMap
    } catch (e) {
      //...
    }
  });
  try {
    var result = (function LOADER_EXECUTION() {
      return fn.apply(context, args); //执行 loader 函数，参数传递前一个 loader 的执行结果
    })();
    if (isSync) {
      isDone = true;
      if (result === undefined) return callback();
      if (result && typeof result === 'object' && typeof result.then === 'function') {
        return result.then(function(r) {
          callback(null, r);
        }, callback);
      }
      return callback(null, result);
    }
  } catch (e) {
    //...
  }
}

// 下面代码会根据 import/export 的不同情况即模块间的相互依赖关系，在对应的 module.dependencies 上增加相应的依赖
// 调用hooks.program.call，触发HarmonyDetectionParserPlugin 和 UseStrictPlugin，增加依赖：HarmonyCompatibilityDependency, HarmonyInitDependency，ConstDependency
if (this.hooks.program.call(ast, comments) === undefined) {
    this.detectStrictMode(ast.body); // 检测当前执行块是否有 use strict
    // 处理 import 进来的变量，是 import 就增加依赖 HarmonyImportSideEffectDependency，HarmonyImportSpecifierDependency;处理 export 出去的变量，是 export 增加依赖 HarmonyExportHeaderDependency，HarmonyExportSpecifierDependency;还会处理其他相关导入导出的变量
    this.prewalkStatements(ast.body); // 处理块遍历
    this.blockPrewalkStatements(ast.body);
    // 用于深入函数内部（方法在 walkFunctionDeclaration 进行递归），然后递归继续查找 ast 上的依赖，异步此处深入会增加依赖 ImportDependenciesBlock
    this.walkStatements(ast.body);
}
this.scope = oldScope;
this.state = oldState;
this.comments = oldComments;
return state; } ```