目录

• 目录
• compilation.addEntry
• addModuleTree
• handleModuleCreation
  • factorizeModule
  • addModule
• moduleGraph
• AsyncQueue
• compilation.Hook

我们已经知道在 compiler.compile 中会创建 compilation，并且在 CompilerHook.make 触发时会调用 compilation.addEntry ，此时 EntryDependency 已经被创建。

当 CompilerHook.make 触发之后，就正式进入了 make 阶段的内容。

本节将探讨 webpack 构建流程中 make 阶段的如下工作：

• compilation.addEntry

compilation.addEntry

内部调用 _addEntryItem 。 _addEntryItem 将会被 addEntry 和 addInclude 。

// lib/Compilation.js
_addEntryItem(context, entry, target, options, callback) {
  const { name } = options;
  // 获取 entryData，无 name 则使用 globalEntry
  let entryData =
    name !== undefined ? this.entries.get(name) : this.globalEntry;
  if (entryData === undefined) {
    // 创建 entryData，包含 dependencies 和 includeDependencies
    entryData = {
      dependencies: [],
      includeDependencies: [],
      options: {
        name: undefined,
        ...options
      }
    };
    // target 为 dependencies 或者 includeDependencies
    // 将 entry 推入 entryData 中相应类型的依赖列表
    entryData[target].push(entry);
    // 将 entryData 缓存到 entries，entries<name, entryData>
    this.entries.set(name, entryData);
  } else {
    entryData[target].push(entry);
    // 将 options 中的新增属性复制到 entryData.options
    for (const key of Object.keys(options)) {
      if (options[key] === undefined) continue;
      if (entryData.options[key] === options[key]) continue;
      if (
        Array.isArray(entryData.options[key]) &&
        Array.isArray(options[key]) &&
        arrayEquals(entryData.options[key], options[key])
      ) {
        continue;
      }
      if (entryData.options[key] === undefined) {
        entryData.options[key] = options[key];
      } else {
        return callback(
          new WebpackError(
            `Conflicting entry option ${key} = ${entryData.options[key]} vs ${options[key]}`
          )
        );
      }
    }
  }
  // 触发 CompilationHook.addEntry => call
  this.hooks.addEntry.call(entry, options);
  // 调用 compilation.addModuleTree 开始构建 moduleTree
  this.addModuleTree(
    {
      context,
      dependency: entry,
      contextInfo: entryData.options.layer
        ? { issuerLayer: entryData.options.layer }
        : undefined
    },
    // finished callback
    (err, module) => {
      if (err) {
        // 触发 CompilationHook.failedEntry => call
        this.hooks.failedEntry.call(entry, options, err);
        return callback(err);
      }
      // 触发 CompilationHook.succeedEntry => call
      this.hooks.succeedEntry.call(entry, options, module);
      return callback(null, module);
    }
  );
}

• entries 的结构是 Map<name, {dependencies: [],includeDependencies: []}> , entry 本质是 EntryDependency 对象。
• 调用 addModuleTree 根据 Dependence 对象创建 Module 对象，并将 Module 添加到 moduleGraph。

addModuleTree

传递 moduleFactory，并调用 handleModuleCreation 创建 Module。

// lib/Compilation.js
addModuleTree({ context, dependency, contextInfo }, callback) {
  const Dep = /** @type {DepConstructor} */ (dependency.constructor);
  // 根据 Dependency 的构造器可以获取到 moduleFactory
  const moduleFactory = this.dependencyFactories.get(Dep);

  this.handleModuleCreation(
    {
      factory: moduleFactory,
      dependencies: [dependency],
      originModule: null,
      contextInfo,
      context
    },
    // ......
  );
}

handleModuleCreation

标签： 重要

// lib/Compilation.js
handleModuleCreation = () => {
  // this.moduleGraph = new ModuleGraph();
  const moduleGraph = this.moduleGraph;
  // factorizeModule 通过相应的 ModuleFactory 创建 Module
  this.factorizeModule(
   {
    currentProfile,
    factory,
    dependencies,
    factoryResult: true,
    originModule,
    contextInfo,
    context
   }, (err, factoryResult) => {
   // 将 Entry 中  fileDependencies、contextDependencies、missingDependencies 收集起来
  const applyFactoryResultDependencies = () => {
   const { fileDependencies, contextDependencies, missingDependencies } =
    factoryResult;
   if (fileDependencies) {
    this.fileDependencies.addAll(fileDependencies);
   }
   if (contextDependencies) {
    this.contextDependencies.addAll(contextDependencies);
   }
   if (missingDependencies) {
    this.missingDependencies.addAll(missingDependencies);
   }
  };

  // 在任务回调中 获得 Module
  const newModule = factoryResult.module;
    // 将 module 加入到 addModuleQueue 队列
    this.addModule(newModule, (err, module) => {
      applyFactoryResultDependencies();
      // 循环 dependencies，将 dependency 设置到 moduleGraph
      for (let i = 0; i < dependencies.length; i++) {
       const dependency = dependencies[i];
       moduleGraph.setResolvedModule(
        connectOrigin ? originModule : null,
        dependency,
        module
       );
      }
      this._handleModuleBuildAndDependencies(
        originModule,
        module,
        recursive,
        callback
       );
    })
 })
}

总结如下：

• factorizeModule 通过 ModuleFactory 创建 Module 和 ModuleDependencies。
• addModule 将 Module 添加到 moduleGraph，同时将 ModuleDependencies 分别添加到 fileDependencies 、 contextDependencies 或者 missingDependencies 。

factorizeModule

function (options, callback) {
  this.factorizeQueue.add(options, callback);
}

factorizeModule 将 factorizeModule 的任务加入到 factorizeQueue，其 processor 为 _factorizeModule。

_factorizeModule() {
  factory.create(/*......*/, (err, result) => {
    callback(null, factoryResult ? result : result.module);
  })
}

_factorizeModule 中的 factory 即为 EntryPlugin (或者其他插件) 为 Dependence 注册的 ModuleFactory ，是创建 Module 的工厂函数。以 normalModuleFactory 为例：

create(data, callback) {
  const resolveData = {
   contextInfo,
   resolveOptions,
   context,
   request,
   assertions,
   dependencies,
   dependencyType,
   fileDependencies,
   missingDependencies,
   contextDependencies,
   createData: {},
   cacheable: true
  };
  // 触发 CompilationHook.beforeResolve => callAsync
  this.hooks.beforeResolve.callAsync(resolveData, (err, result) => {
    // 触发 CompilationHook.factorize => callAsync
    this.hooks.factorize.callAsync(resolveData, (err, module) => {}
  )})
}

addModule

addModule 将 module 包装成任务加入 addModuleQueue 队列，processor 是 _addModule 函数。

addModule(module, callback) {
 this.addModuleQueue.add(module, callback);
}
_addModule(module, callback) {
 const identifier = module.identifier();
 // 如果 modules 已经在 _modules，直接 callback
 const alreadyAddedModule = this._modules.get(identifier);
 if (alreadyAddedModule) {
  return callback(null, alreadyAddedModule);
 }
// ......

 // 尝试从缓存中获取相同 identifier 的 module
 this._modulesCache.get(identifier, null, (err, cacheModule) => {
    // ......
  // 如果命中缓存，以 cacheModule 为模板进行更新
  if (cacheModule) {
   cacheModule.updateCacheModule(module);
   // 将 cacheModule 作为 module
   module = cacheModule;
  }
  // 将 module 设置到 _modules
  this._modules.set(identifier, module);
  // 将 module 加入到 modules，注意 _modules 是 Map，用于查找，modules 是 Set
  this.modules.add(module);
  // ......
  callback(null, module);
 });
}

_addModule 将 module 加入到 _modules 和 module 。

moduleGraph

AsyncQueue

compilation 中的 AsyncQueue，包括 processDependenciesQueue、addModuleQueue、factorizeQueue、buildQueue、rebuildQueue，前四者是父子结构。

/** @type {AsyncQueue<Module, Module, Module>} */
this.processDependenciesQueue = new AsyncQueue({
 name: "processDependencies",
 parallelism: options.parallelism || 100,
 processor: this._processModuleDependencies.bind(this),
});
/** @type {AsyncQueue<Module, string, Module>} */
this.addModuleQueue = new AsyncQueue({
 name: "addModule",
 parent: this.processDependenciesQueue,
 getKey: (module) => module.identifier(),
 processor: this._addModule.bind(this),
});
/** @type {AsyncQueue<FactorizeModuleOptions, string, Module | ModuleFactoryResult>} */
this.factorizeQueue = new AsyncQueue({
 name: "factorize",
 parent: this.addModuleQueue,
 processor: this._factorizeModule.bind(this),
});
/** @type {AsyncQueue<Module, Module, Module>} */
this.buildQueue = new AsyncQueue({
 name: "build",
 parent: this.factorizeQueue,
 processor: this._buildModule.bind(this),
});
/** @type {AsyncQueue<Module, Module, Module>} */
this.rebuildQueue = new AsyncQueue({
 name: "rebuild",
 parallelism: options.parallelism || 100,
 processor: this._rebuildModule.bind(this),
});

compilation.Hook

this.hooks = Object.freeze({
  /** @type {SyncHook<[Module]>} */
  buildModule: new SyncHook(["module"]),
  /** @type {SyncHook<[Module]>} */
  rebuildModule: new SyncHook(["module"]),
  /** @type {SyncHook<[Module, WebpackError]>} */
  failedModule: new SyncHook(["module", "error"]),
  /** @type {SyncHook<[Module]>} */
  succeedModule: new SyncHook(["module"]),
  /** @type {SyncHook<[Module]>} */
  stillValidModule: new SyncHook(["module"]),

  /** @type {SyncHook<[Dependency, EntryOptions]>} */
  addEntry: new SyncHook(["entry", "options"]),
  /** @type {SyncHook<[Dependency, EntryOptions, Error]>} */
  failedEntry: new SyncHook(["entry", "options", "error"]),
  /** @type {SyncHook<[Dependency, EntryOptions, Module]>} */
  succeedEntry: new SyncHook(["entry", "options", "module"]),

  /** @type {SyncWaterfallHook<[(string[] | ReferencedExport)[], Dependency, RuntimeSpec]>} */
  dependencyReferencedExports: new SyncWaterfallHook([
    "referencedExports",
    "dependency",
    "runtime"
  ]),

  /** @type {SyncHook<[ExecuteModuleArgument, ExecuteModuleContext]>} */
  executeModule: new SyncHook(["options", "context"]),
  /** @type {AsyncParallelHook<[ExecuteModuleArgument, ExecuteModuleContext]>} */
  prepareModuleExecution: new AsyncParallelHook(["options", "context"]),

  /** @type {AsyncSeriesHook<[Iterable<Module>]>} */
  finishModules: new AsyncSeriesHook(["modules"]),
  /** @type {AsyncSeriesHook<[Module]>} */
  finishRebuildingModule: new AsyncSeriesHook(["module"]),
  /** @type {SyncHook<[]>} */
  unseal: new SyncHook([]),
  /** @type {SyncHook<[]>} */
  seal: new SyncHook([]),

  /** @type {SyncHook<[]>} */
  beforeChunks: new SyncHook([]),
  /** @type {SyncHook<[Iterable<Chunk>]>} */
  afterChunks: new SyncHook(["chunks"]),

  /** @type {SyncBailHook<[Iterable<Module>]>} */
  optimizeDependencies: new SyncBailHook(["modules"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  afterOptimizeDependencies: new SyncHook(["modules"]),

  /** @type {SyncHook<[]>} */
  optimize: new SyncHook([]),
  /** @type {SyncBailHook<[Iterable<Module>]>} */
  optimizeModules: new SyncBailHook(["modules"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  afterOptimizeModules: new SyncHook(["modules"]),

  /** @type {SyncBailHook<[Iterable<Chunk>, ChunkGroup[]]>} */
  optimizeChunks: new SyncBailHook(["chunks", "chunkGroups"]),
  /** @type {SyncHook<[Iterable<Chunk>, ChunkGroup[]]>} */
  afterOptimizeChunks: new SyncHook(["chunks", "chunkGroups"]),

  /** @type {AsyncSeriesHook<[Iterable<Chunk>, Iterable<Module>]>} */
  optimizeTree: new AsyncSeriesHook(["chunks", "modules"]),
  /** @type {SyncHook<[Iterable<Chunk>, Iterable<Module>]>} */
  afterOptimizeTree: new SyncHook(["chunks", "modules"]),

  /** @type {AsyncSeriesBailHook<[Iterable<Chunk>, Iterable<Module>]>} */
  optimizeChunkModules: new AsyncSeriesBailHook(["chunks", "modules"]),
  /** @type {SyncHook<[Iterable<Chunk>, Iterable<Module>]>} */
  afterOptimizeChunkModules: new SyncHook(["chunks", "modules"]),
  /** @type {SyncBailHook<[], boolean>} */
  shouldRecord: new SyncBailHook([]),

  /** @type {SyncHook<[Chunk, Set<string>, RuntimeRequirementsContext]>} */
  additionalChunkRuntimeRequirements: new SyncHook([
    "chunk",
    "runtimeRequirements",
    "context"
  ]),
  /** @type {HookMap<SyncBailHook<[Chunk, Set<string>, RuntimeRequirementsContext]>>} */
  runtimeRequirementInChunk: new HookMap(
    () => new SyncBailHook(["chunk", "runtimeRequirements", "context"])
  ),
  /** @type {SyncHook<[Module, Set<string>, RuntimeRequirementsContext]>} */
  additionalModuleRuntimeRequirements: new SyncHook([
    "module",
    "runtimeRequirements",
    "context"
  ]),
  /** @type {HookMap<SyncBailHook<[Module, Set<string>, RuntimeRequirementsContext]>>} */
  runtimeRequirementInModule: new HookMap(
    () => new SyncBailHook(["module", "runtimeRequirements", "context"])
  ),
  /** @type {SyncHook<[Chunk, Set<string>, RuntimeRequirementsContext]>} */
  additionalTreeRuntimeRequirements: new SyncHook([
    "chunk",
    "runtimeRequirements",
    "context"
  ]),
  /** @type {HookMap<SyncBailHook<[Chunk, Set<string>, RuntimeRequirementsContext]>>} */
  runtimeRequirementInTree: new HookMap(
    () => new SyncBailHook(["chunk", "runtimeRequirements", "context"])
  ),

  /** @type {SyncHook<[RuntimeModule, Chunk]>} */
  runtimeModule: new SyncHook(["module", "chunk"]),

  /** @type {SyncHook<[Iterable<Module>, any]>} */
  reviveModules: new SyncHook(["modules", "records"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  beforeModuleIds: new SyncHook(["modules"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  moduleIds: new SyncHook(["modules"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  optimizeModuleIds: new SyncHook(["modules"]),
  /** @type {SyncHook<[Iterable<Module>]>} */
  afterOptimizeModuleIds: new SyncHook(["modules"]),

  /** @type {SyncHook<[Iterable<Chunk>, any]>} */
  reviveChunks: new SyncHook(["chunks", "records"]),
  /** @type {SyncHook<[Iterable<Chunk>]>} */
  beforeChunkIds: new SyncHook(["chunks"]),
  /** @type {SyncHook<[Iterable<Chunk>]>} */
  chunkIds: new SyncHook(["chunks"]),
  /** @type {SyncHook<[Iterable<Chunk>]>} */
  optimizeChunkIds: new SyncHook(["chunks"]),
  /** @type {SyncHook<[Iterable<Chunk>]>} */
  afterOptimizeChunkIds: new SyncHook(["chunks"]),

  /** @type {SyncHook<[Iterable<Module>, any]>} */
  recordModules: new SyncHook(["modules", "records"]),
  /** @type {SyncHook<[Iterable<Chunk>, any]>} */
  recordChunks: new SyncHook(["chunks", "records"]),

  /** @type {SyncHook<[Iterable<Module>]>} */
  optimizeCodeGeneration: new SyncHook(["modules"]),

  /** @type {SyncHook<[]>} */
  beforeModuleHash: new SyncHook([]),
  /** @type {SyncHook<[]>} */
  afterModuleHash: new SyncHook([]),

  /** @type {SyncHook<[]>} */
  beforeCodeGeneration: new SyncHook([]),
  /** @type {SyncHook<[]>} */
  afterCodeGeneration: new SyncHook([]),

  /** @type {SyncHook<[]>} */
  beforeRuntimeRequirements: new SyncHook([]),
  /** @type {SyncHook<[]>} */
  afterRuntimeRequirements: new SyncHook([]),

  /** @type {SyncHook<[]>} */
  beforeHash: new SyncHook([]),
  /** @type {SyncHook<[Chunk]>} */
  contentHash: new SyncHook(["chunk"]),
  /** @type {SyncHook<[]>} */
  afterHash: new SyncHook([]),
  /** @type {SyncHook<[any]>} */
  recordHash: new SyncHook(["records"]),
  /** @type {SyncHook<[Compilation, any]>} */
  record: new SyncHook(["compilation", "records"]),

  /** @type {SyncHook<[]>} */
  beforeModuleAssets: new SyncHook([]),
  /** @type {SyncBailHook<[], boolean>} */
  shouldGenerateChunkAssets: new SyncBailHook([]),
  /** @type {SyncHook<[]>} */
  beforeChunkAssets: new SyncHook([]),
  /** @type {AsyncSeriesHook<[CompilationAssets]>} */
  processAdditionalAssets: new AsyncSeriesHook(["assets"]),

  /** @type {SyncBailHook<[], boolean>} */
  needAdditionalSeal: new SyncBailHook([]),
  /** @type {AsyncSeriesHook<[]>} */
  afterSeal: new AsyncSeriesHook([]),

  /** @type {SyncWaterfallHook<[RenderManifestEntry[], RenderManifestOptions]>} */
  renderManifest: new SyncWaterfallHook(["result", "options"]),

  /** @type {SyncHook<[Hash]>} */
  fullHash: new SyncHook(["hash"]),
  /** @type {SyncHook<[Chunk, Hash, ChunkHashContext]>} */
  chunkHash: new SyncHook(["chunk", "chunkHash", "ChunkHashContext"]),

  /** @type {SyncHook<[Module, string]>} */
  moduleAsset: new SyncHook(["module", "filename"]),
  /** @type {SyncHook<[Chunk, string]>} */
  chunkAsset: new SyncHook(["chunk", "filename"]),

  /** @type {SyncWaterfallHook<[string, object, AssetInfo]>} */
  assetPath: new SyncWaterfallHook(["path", "options", "assetInfo"]),

  /** @type {SyncBailHook<[], boolean>} */
  needAdditionalPass: new SyncBailHook([]),

  /** @type {SyncHook<[Compiler, string, number]>} */
  childCompiler: new SyncHook([
    "childCompiler",
    "compilerName",
    "compilerIndex"
  ]),

  /** @type {SyncBailHook<[string, LogEntry], true>} */
  log: new SyncBailHook(["origin", "logEntry"]),

  /** @type {SyncWaterfallHook<[WebpackError[]]>} */
  processWarnings: new SyncWaterfallHook(["warnings"]),
  /** @type {SyncWaterfallHook<[WebpackError[]]>} */
  processErrors: new SyncWaterfallHook(["errors"]),

  /** @type {HookMap<SyncHook<[Partial<NormalizedStatsOptions>, CreateStatsOptionsContext]>>} */
  statsPreset: new HookMap(() => new SyncHook(["options", "context"])),
  /** @type {SyncHook<[Partial<NormalizedStatsOptions>, CreateStatsOptionsContext]>} */
  statsNormalize: new SyncHook(["options", "context"]),
  /** @type {SyncHook<[StatsFactory, NormalizedStatsOptions]>} */
  statsFactory: new SyncHook(["statsFactory", "options"]),
  /** @type {SyncHook<[StatsPrinter, NormalizedStatsOptions]>} */
  statsPrinter: new SyncHook(["statsPrinter", "options"]),

  get normalModuleLoader() {
    return getNormalModuleLoader();
  }
});