...
// 配置文件是数组的时候，创建多个实例，不常用
const createMultiCompiler = (childOptions, options) => {...};

/**
 * 创建真正的 Compiler 实例
 */
const createCompiler = rawOptions => {
	// 整理成为完整的 webpack 配置文件
	const options = getNormalizedWebpackOptions(rawOptions);
	// 设置 context，当前环境就是 node 当前的执行目录 process.cwd()
	applyWebpackOptionsBaseDefaults(options);
	// 新建编译器实例
	const compiler = new Compiler(options.context);
	compiler.options = options; // 配置文件挂载
	// 注册环境
	// 1、监听了 beforeRun 这个钩子，用于构建之前清理缓存
	// 2、定义 inputFileSystem、outputFileSystem、watchFileSystem 等输入输出流
	new NodeEnvironmentPlugin({
		infrastructureLogging: options.infrastructureLogging
	}).apply(compiler);

	// 注册 webpack 配置文件插件
	if (Array.isArray(options.plugins)) {
		for (const plugin of options.plugins) {
			if (typeof plugin === "function") {
				plugin.call(compiler, compiler);
			} else {
				plugin.apply(compiler);
			}
		}
	}
	// 做一些初始的操作，给配置文件做一些设置默认的参数
	applyWebpackOptionsDefaults(options);
	// 初始化环境信息
	compiler.hooks.environment.call(); // 没找到相应的监听，webpack5 留给了开发者自己使用
	compiler.hooks.afterEnvironment.call();
	// 根据所有配置 option 参数转换成对应的 webpack 内部插件
	new WebpackOptionsApply().process(options, compiler);
	compiler.hooks.initialize.call();
	return compiler;
};

const webpack = ((options, callback) => {

		const create = () => {
			validateSchema(webpackOptionsSchema, options);
			let compiler;
			let watch = false;
			let watchOptions;
			// 如果配置文件是数组形式存在多分配置文件，则会创建多个编译器分别处理
			if (Array.isArray(options)) {
				compiler = createMultiCompiler(options, options);
				watch = options.some(options => options.watch);
				watchOptions = options.map(options => options.watchOptions || {});
			} else {
				// 我们的常规处理方式，就是配置文件是一个普通的对象形式
				compiler = createCompiler(options);
        // 监听模式：只有 watch 为 true 的时候 watchOptions 才有意义
				watch = options.watch; 
        // 监听模式的配置参数（不监听的文件夹，刷新频率等）
				watchOptions = options.watchOptions || {}; 
			}
			return { compiler, watch, watchOptions };
		};

		if (callback) {
			try {
				const { compiler, watch, watchOptions } = create();
				if (watch) {
					// 如果是监听模式：走这里
					compiler.watch(watchOptions, callback);
				} else {
					// 打包编译模式走这里
					// run 是编译的入口方法
					compiler.run((err, stats) => {
						compiler.close(err2 => {
							callback(err || err2, stats);
						});
					});
				}
				return compiler;
			} catch (err) {...}
		} else {
			const { compiler, watch } = create();
			...
			return compiler;
		}
	}
);

module.exports = webpack;

if (Array.isArray(options.plugins)) {
		for (const plugin of options.plugins) {
			if (typeof plugin === "function") {
				plugin.call(compiler, compiler);
			} else {
				plugin.apply(compiler);
			}
		}
	}

// 根据所有配置 options 参数转换成对应的 webpack 内部插件
new WebpackOptionsApply().process(options, compiler);

...
// addEntry、_addEntryItem 的作用是将模块的入口信息传递给模块树中，即 addModuleTree
addEntry(context, entry, optionsOrName, callback) {
		...
		this._addEntryItem(context, entry, "dependencies", options, callback);
}

_addEntryItem(context, entry, target, options, callback) {
  const { name } = options;
  let entryData =
    name !== undefined ? this.entries.get(name) : this.globalEntry;
  if (entryData === undefined) {
    // 入口数据，包括入口依赖，包含依赖和一些配置信息
    // 配置信息包括了模块路径和模块名
    entryData = {
      dependencies: [],
      includeDependencies: [],
      options: {
        name: undefined,
        ...options
      }
    };
    // target值为：dependencies
    // name值为：main
    entryData[target].push(entry);
    this.entries.set(name, entryData);
  } else {...}

  // 添加模块树
  this.addModuleTree({
    ...
		dependency: entry
    ...
  }...);
}
  
// 这些调用最后会将 entry 的入口信息”翻译“成一个模块(严格上说，模块是NormalModule实例化后的对象)
addModuleTree({ context, dependency, contextInfo }, callback) {
  ...
  const Dep = (dependency.constructor);
  // 返回对应的模块工厂，这样才能正确的处理模块
  // dependencyFactories 的初始化是在 EntryPlugin 中
  const moduleFactory = this.dependencyFactories.get(Dep);
  ...
  // 处理模块的创建，开始创建模块实例
  this.handleModuleCreation({
    ...
    factory: moduleFactory,
		dependencies: [dependency],
  },...);
}

handleModuleCreation(
  {
    factory,
    dependencies,
    originModule,
    contextInfo,
    context,
    recursive = true
  },
  callback
) {
  const moduleGraph = this.moduleGraph; // 模块图
  // 因式分解模块
  this.factorizeModule(
    {
      currentProfile,
      factory,
      dependencies,
      originModule,
      contextInfo,
      context
    },
    (err, newModule) => {
      // 分解模块完成
      // 添加模块，执行addModule，存储 module
		  this.addModule(newModule, (err, module) => {...})
    }
  );
}

// 添加到因式分解队列，最终会通过绑定的 _factorizeModule 方法对 因式分解队列 里边的模块进行处理
factorizeModule(options, callback) {
		this.factorizeQueue.add(options, callback);
}
_factorizeModule(
  {
    currentProfile,
    factory,
    dependencies,
    originModule,
    contextInfo,
    context
  },
  callback
) {
  if (currentProfile !== undefined) {
    currentProfile.markFactoryStart();
  }
  // 执行 moduleFactory.create 创建模块，这里主要做了三件事
  // 1、执行 factory.hooks.factorize.call 钩子，
  // 然后会调用ExternalModuleFactoryPlugin中注册的钩子，用于配置外部文件的模块加载方式， 例如fs, http, events等node原生方法
  // 2、使用 enhanced-resolve 解析模块和 loader 真实绝对路径
  // 3、new NormalModule() 创建 module 实例
  factory.create(
    ...,
    (err, result) => {
      if (result) {
        const {
          fileDependencies,
          contextDependencies,
          missingDependencies
        } = result;
        if (fileDependencies) {
          this.fileDependencies.addAll(fileDependencies);
        }
        if (contextDependencies) {
          this.contextDependencies.addAll(contextDependencies);
        }
        if (missingDependencies) {
          this.missingDependencies.addAll(missingDependencies);
        }
      }
      ...
      const newModule = result.module;
      ...
      callback(null, newModule);
    }
  );
}

// 添加模块队列，最后里边的模块会通过绑定的 _addModule 进行处理
addModule(module, callback) {
	this.addModuleQueue.add(module, callback);
}
_addModule(module, callback) {
  const identifier = module.identifier();
  const alreadyAddedModule = this._modules.get(identifier);
  if (alreadyAddedModule) {
    return callback(null, alreadyAddedModule);
  }

  const currentProfile = this.profile
    ? this.moduleGraph.getProfile(module)
    : undefined;
  if (currentProfile !== undefined) {
    currentProfile.markRestoringStart();
  }

  this._modulesCache.get(identifier, null, (err, cacheModule) => {
    if (err) return callback(new ModuleRestoreError(module, err));

    if (currentProfile !== undefined) {
      currentProfile.markRestoringEnd();
      currentProfile.markIntegrationStart();
    }

    if (cacheModule) {
      cacheModule.updateCacheModule(module);
      module = cacheModule;
    }
    this._modules.set(identifier, module);
    this.modules.add(module);
    // 将模块添加到 moduleGraph 模块图中
    ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
    if (currentProfile !== undefined) {
      currentProfile.markIntegrationEnd();
    }
    callback(null, module);
  });
}

buildModule(module, callback) {
  this.buildQueue.add(module, callback);
}
_buildModule(module, callback) {
  ...
  // 判断是否需要构建当前模块：如果模块有错误或者模块构建的模块可以从缓存中取
  module.needBuild(
    {
      fileSystemInfo: this.fileSystemInfo
    },
    (err, needBuild) => {
      ...
      // 然后调用 module 的 build 方法
      // 然后进入 doBuild 方法， 
      module.build(
        this.options,
        this,
        this.resolverFactory.get("normal", module.resolveOptions),
        this.inputFileSystem,
        err => {
          ...
          // 缓存解析完的 module 至 _modulesCache，此时已经有 _source(解析后的源码)
          this._modulesCache.store(module.identifier(), null, module, err => {
            ...
            // 成功-代表模块构建就构建好了
            this.hooks.succeedModule.call(module);
            return callback();
          });
        }
      );
    }
  );
}

this.buildModule(module, err => {
  ...
  // 这避免了循环依赖的死锁
  if (this.processDependenciesQueue.isProcessing(module)) {
    return callback();
  }
  // 处理模块依赖
  // 执行processModuleDependencies，获得模块依赖
  this.processModuleDependencies(module, err => {...});
});
  
processModuleDependencies(module, callback) {
  this.processDependenciesQueue.add(module, callback);
}

// 流程模块依赖关系
_processModuleDependencies(module, callback) {
  // 存放模块相关依赖
  const dependencies = new Map();
  const sortedDependencies = [];
  ...
  
  // 处理模块依赖流程，将
  const processDependency = dep => {
    this.moduleGraph.setParents(dep, currentBlock, module);
    const resourceIdent = dep.getResourceIdentifier();
    if (resourceIdent) {
      ...
      const constructor = dep.constructor;
      let innerMap;
      let factory;
      if (factoryCacheKey === constructor) {...} else {
        /// 根据依赖类型返回对应工厂
        factory = this.dependencyFactories.get(dep.constructor);
        ...
        innerMap = dependencies.get(factory);
        ...
      }
      // 模块依赖
      let list = innerMap.get(cacheKey);
      if (list === undefined) {
        innerMap.set(cacheKey, (list = []));
        sortedDependencies.push({
          factory: factoryCacheValue2,
          dependencies: list,
          originModule: module
        });
      }
      list.push(dep);
      listCacheKey = cacheKey;
      listCacheValue = list;
    }
  };

  const processDependenciesBlock = block => {
    if (block.dependencies) {
      currentBlock = block;
      // 循环处理模块依赖，将依赖的模块，转化为待处理的模块
      for (const dep of block.dependencies) processDependency(dep);
    }
    if (block.blocks) {
      for (const b of block.blocks) processDependenciesBlock(b);
    }
  };

  try {
    processDependenciesBlock(module);
  } catch (e) {
    return callback(e);
  }
    
  // 如果 sortedDependencies.length === 0 
  // 到此 make 阶段结束 进入 seal 阶段
  if (sortedDependencies.length === 0) {
    callback();
    return;
  }

  asyncLib.forEach(
    sortedDependencies,
    (item, callback) => {
      // 回到 handleModuleCreation，循环构建模块
      this.handleModuleCreation(item, err => {
        ....
        callback();
      });
    },
    err => {...}
  );
}

...
class Compilation {
	constructor(compiler) {
		...
		// compilation 负责模块 打包 编译 优化 的过程
		this.hooks = {}
		...
		// compiler 实例
		this.compiler = compiler;
		// 输出相关
		...
    // 配置信息
		const options = compiler.options;
		// 相关模版
		...
    // 模块、chunk 图
		this.moduleGraph = new ModuleGraph();
		this.chunkGraph = undefined;
		// 代码生成结果
		this.codeGenerationResults = undefined;

		// 模块队列
		this.processDependenciesQueue = new AsyncQueue({...});
		this.addModuleQueue = new AsyncQueue({...});
		this.factorizeQueue = new AsyncQueue({...});
		this.buildQueue = new AsyncQueue({...});
		this.rebuildQueue = new AsyncQueue({...});

		// 入口相关
		...
		// 存放相关 chunk
		this.chunks = new Set(); 
		...
		// 存放相关 module
		this.modules = new Set(); // 存放 modules 模块
		...
		// 存放 asset
		this.assets = {}; 
		...
		// 存放输出资源
		this.emittedAssets = new Set(); 
		...
		// 文件依赖
		this.fileDependencies = new LazySet(); 
		// 上下文依赖
		this.contextDependencies = new LazySet(); 
		// 错误依赖
		this.missingDependencies = new LazySet(); 
		// 构建依赖
		this.buildDependencies = new LazySet(); 
    ...
    // 缓存相关
		this._modulesCache = this.getCache("Compilation/modules");
		this._assetsCache = this.getCache("Compilation/assets");
		this._codeGenerationCache = this.getCache("Compilation/codeGeneration");
	}

	// 返回缓存
	getCache(name) {
		return this.compiler.getCache(name);
	}
	...

	// 添加模块队列，最后里边的模块会通过绑定的 _addModule 进行处理
	addModule(module, callback) {
		this.addModuleQueue.add(module, callback);
	}
	_addModule(module, callback) {...}
	...

	// 模块对象的构建
	buildModule(module, callback) {
		this.buildQueue.add(module, callback);
	}
	_buildModule(module, callback) {...}

	// 处理模块依赖
	processModuleDependencies(module, callback) {
		this.processDependenciesQueue.add(module, callback);
	}
	...

	// 流程模块依赖关系
	_processModuleDependencies(module, callback) {}

	// 处理模块创建
	handleModuleCreation(...) {...}
	// 分解模块
	factorizeModule(options, callback) {
		// 添加到因式分解队列，最终会通过绑定的 _factorizeModule 方法对 因式分解队列 里边的模块进行处理
		this.factorizeQueue.add(options, callback);
	}
	_factorizeModule(...) {...}

	...
	// 将entry的入口信息”翻译“成一个模块(严格上说，模块是NormalModule实例化后的对象)
	addModuleTree({ context, dependency, contextInfo }, callback) {...}

	addEntry(context, entry, optionsOrName, callback) {...}
	// addEntry的作用是将模块的入口信息传递给模块树中，即 addModuleTree
	_addEntryItem(context, entry, target, options, callback) {...}

	// 将模块添加到 重建模块 队列，之后会由 _rebuildModule 进行处理
	rebuildModule(module, callback) {	
		this.rebuildQueue.add(module, callback);
	}
	_rebuildModule(module, callback) {...}
   // 模块构建好之后会触发 finish
	 // 可以得到 处理后的源码
	finish(callback) {...}

	unseal() {...}

	// 输出
	seal(callback) {...}

	...
  // 代码生成
	codeGeneration(callback) {...}
  ...

	// 添加 chunk
	addChunk(name) {
		if (name) {
			const chunk = this.namedChunks.get(name);
			if (chunk !== undefined) {
				return chunk;
			}
		}
		const chunk = new Chunk(name);
		this.chunks.add(chunk);
		ChunkGraph.setChunkGraphForChunk(chunk, this.chunkGraph);
		if (name) {
			this.namedChunks.set(name, chunk);
		}
		return chunk;
	}
  ...
  // 创建模块 hash
	createModuleHashes() {...}
  // 输出资源
	emitAsset(file, source, assetInfo = {}) {}

  // 更新、重命名、返回、删除、清空 asset
	...

  // 生成资源
	createModuleAssets() {...}

	// 返回渲染清单
	getRenderManifest(options) {
		return this.hooks.renderManifest.call([], options);
	}

  // 值得一提的是，createChunkAssets执行过程中，会优先读取cache中是否已经有了相同hash的资源，
	// 如果有，则直接返回内容，否则才会继续执行模块生成的逻辑，并存入cache中。
	createChunkAssets(callback) {...}
  ...
}
...
module.exports = Compilation;

// 创建 ChunkGraph 
const chunkGraph = new ChunkGraph(this.moduleGraph);
this.chunkGraph = chunkGraph;
// 遍历 modules，将 module 添加到 chunkGraph 上
for (const module of this.modules) {
  ChunkGraph.setChunkGraphForModule(module, chunkGraph);
}

for (const [name, { dependencies, includeDependencies, options }] of this
  .entries) {
  const chunk = this.addChunk(name);
  const entrypoint = new Entrypoint(options);
  ...
	connectChunkGroupAndChunk(entrypoint, chunk);
  ...
  for (const dep of [...this.globalEntry.dependencies, ...dependencies]) {
    entrypoint.addOrigin(null, { name }, /** @type {any} */ (dep).request);

    const module = this.moduleGraph.getModule(dep);
    if (module) {
      // 在 chunkGraph 上连接 chunk 和入口模块
      chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint);
      ...
    }
  }
}

const buildChunkGraph = (compilation, inputEntrypointsAndModules) => {
	...
  // PART ONE
	visitModules(...);
	...
  // PART TWO
	connectChunkGroups(...);
  ...
	cleanupUnconnectedGroups(compilation, allCreatedChunkGroups);
};

const visitModules = (...) => {
	const { moduleGraph, chunkGraph } = compilation;

	// 循环处理每个模块
	// 1、 对于同步模块，缓存进 blockModulesMap Map
	// 2、 对于异步模块，缓存进 blockQueue Set
	const blockModulesMap = extractBlockModulesMap(compilation);
  ...
}
  
const extractBlockModulesMap = compilation => {
	const { moduleGraph } = compilation;
	const blockModulesMap = new Map();
	const blockQueue = new Set();
  // 循环处理每个模块
	for (const module of compilation.modules) {
		...
		blockQueue.add(module);
		for (const block of blockQueue) {
			let modules;
      // 对于同步模块，缓存进 blockModulesMap Map
			if (moduleMap !== undefined && block.dependencies) {
				 ...
         blockModulesMap.set(block, modules);
         ...
				}
			}
      // 对于异步模块，缓存进 blockQueue Set
			if (block.blocks) {
				for (const b of block.blocks) {
					blockQueue.add(b);
				}
			}
		}
	}
	return blockModulesMap;
};

createModuleHashes() {
  ...
  for (const module of this.modules) {
    for (const runtime of chunkGraph.getModuleRuntimes(module)) {
      statModulesHashed++;
      this._createModuleHash(...);
    }
  }
}
_createModuleHash( module, ...) {
  const moduleHash = createHash(hashFunction);
  module.updateHash(moduleHash, {
    chunkGraph,
    runtime,
    runtimeTemplate
  });
  ...
  return moduleHashDigest;
}

updateHash(hash, context) {
  hash.update(this.buildInfo.hash);
  this.generator.updateHash(hash, {
    module: this,
    ...context
  });
  super.updateHash(hash, context);
}

codeGeneration(callback) {
  const { chunkGraph } = this;
  this.codeGenerationResults = new CodeGenerationResults();
  const jobs = [];
  for (const module of this.modules) {
    const runtimes = chunkGraph.getModuleRuntimes(module);
    if (runtimes.size === 1) {
      for (const runtime of runtimes) {
        ...
        jobs.push({ module, hash, runtime, runtimes: [runtime] });
      }
    } else if (runtimes.size > 1) {
      for (const runtime of runtimes) {
          ...
          const newJob = { module, hash, runtime, runtimes: [runtime] };
          ...
      }
    }
  }
  this._runCodeGenerationJobs(jobs, callback);
}

_runCodeGenerationJobs(jobs, callback) {
  let statModulesFromCache = 0;
  let statModulesGenerated = 0;
  const {
    chunkGraph,
    moduleGraph,
    dependencyTemplates,
    runtimeTemplate
  } = this;
  const results = this.codeGenerationResults;
  const errors = [];
  asyncLib.eachLimit(
    jobs,
    this.options.parallelism,
    ({ module, hash, runtime, runtimes }, callback) => {
      this._codeGenerationModule(
        module,
        runtime,
        runtimes,
        hash,
        dependencyTemplates,
        chunkGraph,
        moduleGraph,
        runtimeTemplate,
        errors,
        results,
        (err, codeGenerated) => {
          if (codeGenerated) statModulesGenerated++;
          else statModulesFromCache++;
          callback(err);
        }
      );
    },
    err => {...}
  );
}
_codeGenerationModule(
  module,
  runtime,
  runtimes,
  hash,
  dependencyTemplates,
  chunkGraph,
  moduleGraph,
  runtimeTemplate,
  errors,
  results,
  callback
) {
  let codeGenerated = false;
  const cache = new MultiItemCache(
    runtimes.map(runtime =>
      this._codeGenerationCache.getItemCache(
        `${module.identifier()}|${getRuntimeKey(runtime)}`,
        `${hash}|${dependencyTemplates.getHash()}`
      )
    )
  );
  cache.get((err, cachedResult) => {
    if (err) return callback(err);
    let result;
    if (!cachedResult) {
      try {
        codeGenerated = true;
        this.codeGeneratedModules.add(module);
        result = module.codeGeneration({
          chunkGraph,
          moduleGraph,
          dependencyTemplates,
          runtimeTemplate,
          runtime
        });
      } catch (err) {...}
    } else {
      result = cachedResult;
    }
    ...
    if (!cachedResult) {
      cache.store(result, err => callback(err, codeGenerated));
    } else {
      callback(null, codeGenerated);
    }
  });
}

processRuntimeRequirements() {
		const { chunkGraph } = this;

		const additionalModuleRuntimeRequirements = this.hooks
			.additionalModuleRuntimeRequirements;
		const runtimeRequirementInModule = this.hooks.runtimeRequirementInModule;
		for (const module of this.modules) {
			if (chunkGraph.getNumberOfModuleChunks(module) > 0) {
				for (const runtime of chunkGraph.getModuleRuntimes(module)) {
					let set;
					....
					chunkGraph.addModuleRuntimeRequirements(module, runtime, set);
				}
			}
		}
  
		for (const chunk of this.chunks) {
			const set = new Set();
			...
			chunkGraph.addChunkRuntimeRequirements(chunk, set);
		}

		const treeEntries = new Set();
		for (const ep of this.entrypoints.values()) {
			const chunk = ep.getRuntimeChunk();
			if (chunk) treeEntries.add(chunk);
		}
		for (const ep of this.asyncEntrypoints) {
			const chunk = ep.getRuntimeChunk();
			if (chunk) treeEntries.add(chunk);
		}

		for (const treeEntry of treeEntries) {
			const set = new Set();
			...
			chunkGraph.addTreeRuntimeRequirements(treeEntry, set);
		}
	}

clearAssets() {
  for (const chunk of this.chunks) {
    chunk.files.clear();
    chunk.auxiliaryFiles.clear();
  }
}

createModuleAssets() {
  const { chunkGraph } = this;
  for (const module of this.modules) {
    if (module.buildInfo.assets) {
      const assetsInfo = module.buildInfo.assetsInfo;
      for (const assetName of Object.keys(module.buildInfo.assets)) {
        const fileName = this.getPath(assetName, {
          chunkGraph: this.chunkGraph,
          module
        });
        // 将文件名添加到 chunk 的 auxiliaryFiles 上面
        for (const chunk of chunkGraph.getModuleChunksIterable(module)) {
          chunk.auxiliaryFiles.add(fileName);
        }
        this.emitAsset(
          fileName,
          module.buildInfo.assets[assetName],
          assetsInfo ? assetsInfo.get(assetName) : undefined
        );
        this.hooks.moduleAsset.call(module, fileName);
      }
    }
  }
}

emitAsset(file, source, assetInfo = {}) {
  if (this.assets[file]) {
    ...
  }
  // 将资源挂载到 compiltion 对象的 assets 上
  this.assets[file] = source;
  this._setAssetInfo(file, assetInfo, undefined);
}

getRenderManifest(options) {
		return this.hooks.renderManifest.call([], options);
}

asyncLib.forEach(
this.chunks,
(chunk, callback) => {
  let manifest;
  try {
    manifest = this.getRenderManifest({...});
  } catch (err) {...}

compilation.hooks.renderManifest.tap(
	"JavascriptModulesPlugin",
  (result, options) => {
    const {
      hash,
      chunk,
      chunkGraph,
      moduleGraph,
      runtimeTemplate,
      dependencyTemplates,
      outputOptions,
      codeGenerationResults
    } = options;
    const hotUpdateChunk = chunk instanceof HotUpdateChunk ? chunk : null;
    let render;
    const filenameTemplate = JavascriptModulesPlugin.getChunkFilenameTemplate(
      chunk,
      outputOptions
    );
    if (hotUpdateChunk) {
      render = () => this.renderChunk(...);
    } else if (chunk.hasRuntime()) {
      render = () => this.renderMain(...);
    } else {
      ...
      render = () => this.renderChunk(...);
    }

    result.push({
      render,
      filenameTemplate,
      pathOptions: {
        hash,
        runtime: chunk.runtime,
        chunk,
        contentHashType: "javascript"
      },
      info: {
        javascriptModule: compilation.runtimeTemplate.isModule()
      },
      identifier: hotUpdateChunk
        ? `hotupdatechunk${chunk.id}`
        : `chunk${chunk.id}`,
      hash: chunk.contentHash.javascript
    });

    return result;
  }
);

manifest = this.getRenderManifest({...});

asyncLib.forEach(
  manifest,
  (fileManifest, callback) => {
    const ident = fileManifest.identifier;
    const usedHash = fileManifest.hash;
    const assetCacheItem = this._assetsCache.getItemCache(ident,usedHash);
    assetCacheItem.get((err, sourceFromCache) => {
      ...
        let source = sourceFromCache;
        const alreadyWritten = alreadyWrittenFiles.get(file);
        if (alreadyWritten !== undefined) {
           ...
            source = alreadyWritten.source;
        } else if (!source) {
          // render the asset
          source = fileManifest.render();

          // Ensure that source is a cached source to avoid additional cost because of repeated access
          if (!(source instanceof CachedSource)) {
            const cacheEntry = cachedSourceMap.get(source);
            if (cacheEntry) {
              source = cacheEntry;
            } else {
              const cachedSource = new CachedSource(source);
              cachedSourceMap.set(source, cachedSource);
              source = cachedSource;
            }
          }
        }
        // 可以在 createChunkAssets 方法体中的 this.emitAsset(file, source, assetInfo) 代码行打上断点，
        // 观察此时 source 中的数据结构。在 source._source 字段已经初见打包后源码雏形
        this.emitAsset(file, source, assetInfo);
        ....
  },
  callback
);

	renderChunk(renderContext, hooks) {
		const { chunk, chunkGraph } = renderContext;
		const modules = chunkGraph.getOrderedChunkModulesIterableBySourceType(
			chunk,
			"javascript",
			compareModulesByIdentifier
		);
		const moduleSources =
			Template.renderChunkModules(
				renderContext,
				modules ? Array.from(modules) : [],
				module => this.renderModule(module, renderContext, hooks, true)
			) || new RawSource("{}");
		...
		return new ConcatSource(source, ";");
	}

	renderMain(renderContext, hooks, compilation) {
		const { chunk, chunkGraph, runtimeTemplate } = renderContext;
		....
		const chunkModules = Template.renderChunkModules(
			renderContext,
			inlinedModules
				? allModules.filter(m => !inlinedModules.has(m))
				: allModules,
			module =>
				this.renderModule(
					module,
					renderContext,
					hooks,
					allStrict ? "strict" : true
				),
			prefix
		);
		...
		return iife ? new ConcatSource(finalSource, ";") : finalSource;
	}

source = fileManifest.render();
this.emitAsset(file, source, assetInfo);

run(callback) {
		...
     // 最终的回调
		const finalCallback = (err, stats) => {...};

		....
    // 构建完成后的回调
		const onCompiled = (err, compilation) => {...};

		const run = () => {
			// 1 清理缓存
			this.hooks.beforeRun.callAsync(this, err => {
				if (err) return finalCallback(err);
        // webpack 5 中，这个钩子内部没有做处理
				this.hooks.run.callAsync(this, err => {
					if (err) return finalCallback(err);

					this.readRecords(err => {
						if (err) return finalCallback(err);
						//  最终回到 onCompiled 回调
						this.compile(onCompiled);
					});
				});
			});
		};

		if (this.idle) {
			this.cache.endIdle(err => {
				if (err) return finalCallback(err);
				this.idle = false;
				run();
			});
		} else {
			run();
		}
	}

class NodeEnvironmentPlugin {
	...
	apply(compiler) {
		compiler.infrastructureLogger = createConsoleLogger(....);
    // 定义了输入输出流
		compiler.inputFileSystem = new CachedInputFileSystem(fs, 60000);
		const inputFileSystem = compiler.inputFileSystem;
		compiler.outputFileSystem = fs;
		compiler.intermediateFileSystem = fs;
		compiler.watchFileSystem = new NodeWatchFileSystem(
			compiler.inputFileSystem
		);
		// 监听了 beforeRun 这个钩子
		compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
			if (compiler.inputFileSystem === inputFileSystem) {
				// 作用是清理构建缓存。 purge（清洗）
				inputFileSystem.purge();
			}
		});
	}
}
module.exports = NodeEnvironmentPlugin;

compile(callback) {
		// 初始化模块工厂对象：这一步后才能识别不同的模块
		// 初始化 normalModuleFactory contextModuleFactory
		const params = this.newCompilationParams();
		this.hooks.beforeCompile.callAsync(params, err => {
			if (err) return callback(err);

			this.hooks.compile.call(params);
			 // compilation 记录本次编译作业的环境信息 
			 // 1、该对象负责组织整个编译过程，包含了每个构建环节对应的方法
			 // 2、对象内部保留了对 compiler 对象的引用 
			 // 3、并且存放所有的 modules, chunks,生成的 assets 以及最后用来生成 js 的 template
			const compilation = this.newCompilation(params);
      ...
			// 编译过程，编译正式开始
			// 1、其中 EntryPlugin 监听了 make 钩子，这里会调用 addEntry
			// 2、找到入口 js 模块，进行下一步的模块绑定
			this.hooks.make.callAsync(compilation, err => {
        ...
				//模块构建完成
				this.hooks.finishMake.callAsync(compilation, err => {
          ...
          // 可以理解为 node 自动支持的一种异步函数，
					process.nextTick(() => {
						...
						// 做一些模块的错误和警告的处理
						compilation.finish(err => {
							...
							// 封装模块开始
							compilation.seal(err => {
								...
								// 编译完成
								this.hooks.afterCompile.callAsync(compilation, err => {
									...
									return callback(null, compilation);
								});
							});
						});
					});
				});
			});
		});
	}

// 初始化模块工厂对象：这一步后才能识别不同的模块
// 初始化 normalModuleFactory contextModuleFactory
const params = this.newCompilationParams();

// newCompilationParams 方法
newCompilationParams() {
  const params = {
    normalModuleFactory: this.createNormalModuleFactory(),
    contextModuleFactory: this.createContextModuleFactory()
  };
  return params;
}

// DllReferencePlugin.js
compiler.hooks.compile.tap("DllReferencePlugin", params => {
			.....
			const normalModuleFactory = params.normalModuleFactory;
			new ExternalModuleFactoryPlugin(sourceType || "var", externals).apply(
				normalModuleFactory
			);
			new DelegatedModuleFactoryPlugin({
				source: source,
				type: this.options.type,
				scope: this.options.scope,
				context: this.options.context || compiler.options.context,
				content,
				extensions: this.options.extensions,
				associatedObjectForCache: compiler.root
			}).apply(normalModuleFactory);
		});

// ExternalsPlugin
compiler.hooks.compile.tap("ExternalsPlugin", ({ normalModuleFactory }) => {
			new ExternalModuleFactoryPlugin(this.type, this.externals).apply(
				normalModuleFactory
			);
		});

// DelegatedPlugin
compiler.hooks.compile.tap("DelegatedPlugin", ({ normalModuleFactory }) => {
			new DelegatedModuleFactoryPlugin({
				associatedObjectForCache: compiler.root,
				...this.options
			}).apply(normalModuleFactory);
		});

// WebpackOptionsApply.js
process(options, compiler) {
 ...
    // 用于入口解析（包括确定是单入口还是多入口）
		new EntryOptionPlugin().apply(compiler);
		compiler.hooks.entryOption.call(options.context, options.entry);
 ...
}
 
// EntryOptionPlugin.js
 static applyEntryOption(compiler, context, entry) {
		...
			const EntryPlugin = require("./EntryPlugin");
			...
				for (const entry of desc.import) {
					new EntryPlugin(context, entry, options).apply(compiler);
				}
		...
	}

compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
			const { entry, options, context } = this;

			const dep = EntryPlugin.createDependency(entry, options);
			// 建编译入口, 编译正式开始
			compilation.addEntry(context, dep, options, err => {
				callback(err);
			});
		});

class NormalModuleFactory extends ModuleFactory {
  
	constructor({
		context,
		fs,
		resolverFactory,
		options, // 对应 webpack 配置里边的 module 配置项
		associatedObjectForCache,
		layers = false
	}) {
		super();
		this.hooks = Object.freeze({});
		this.resolverFactory = resolverFactory;
		// ruleSet 存放的是 loader，包括自带的 loader 和自定义的 loader
		this.ruleSet = ruleSetCompiler.compile([
			{
				rules: options.defaultRules
			},
			{
				rules: options.rules
			}
		]);
		...
		/*****
		 * hooks.factorize 钩子主要干了几件事情
		 * 1、调用 hooks.resolve 钩子函数，将与解析模块相关的数据挂载到 resolveData.createData 对象上
		 * 2、创建 NormalModule 实例
		 * 3、将 createdModule createData resolveData 整合成一个对象 createdModule 返回
		 * 至此，createdModule 包含了模块路径，处理模块的 loader 路径，以及解析和生成相关模块的方法；
		 * createdModule 就相当于模块的使用说明书
		 */
		this.hooks.factorize.tapAsync(
			{
				name: "NormalModuleFactory",
				stage: 100
			},
			(resolveData, callback) => {
				// 内部继续调用  hooks.resolve 钩子
				this.hooks.resolve.callAsync(resolveData, (err, result) => {
					...
					this.hooks.afterResolve.callAsync(resolveData, (err, result) => {
						...
						const createData = resolveData.createData;

						this.hooks.createModule.callAsync(
							createData,
							resolveData,
							(err, createdModule) => {
								if (!createdModule) {
									...
									// 创建 NormalModule 实例
									createdModule = new NormalModule(createData);
								}
								createdModule = this.hooks.module.call(
									createdModule,
									createData,
									resolveData
								);
								return callback(null, createdModule);
							}
						);
					});
				});
			}
		);
    /***
		 * hooks.resolve 主要干了几件事情
		 * 1、根据资源依赖类型，挂载相应的 loader
		 * 2、将与处理模块相关的 loader 数组，以及解析器 parser，生成器 generator 挂载 resolveData 的 createData 对象上
		 */
		this.hooks.resolve.tapAsync(
			{...},
			(data, callback) => {
				....
				const continueCallback = needCalls(2, err => {
					...
					const result = this.ruleSet.exec({...});
					const settings = {};
					const useLoadersPost = [];
					const useLoaders = [];
					const useLoadersPre = [];
					for (const r of result) {...}

					let postLoaders, normalLoaders, preLoaders;

					const continueCallback = needCalls(3, err => {
						...
						const allLoaders = postLoaders;
						....
						Object.assign(data.createData, {
							...
							request: stringifyLoadersAndResource(
								allLoaders,
								resourceData.resource
							),
							...
							loaders: allLoaders,
							...
							// 配备解析器
							parser: this.getParser(type, settings.parser),
							// 配备生成器
							generator: this.getGenerator(type, settings.generator),
							resolveOptions
						});
						callback();
					});
					...
				});
        // 获取 loader 地址
				this.resolveRequestArray(...);
				...
			}
		);
	}

	// 这里注意做了 3 件事情
	//  1、执行 factory.hooks.factorize.call 钩子，然后会调用 ExternalModuleFactoryPlugin 中注册的钩子，用于配置外部文件的模块加载方式， 例如fs, http, events等node原生方法
	//  2、使用enhanced-resolve解析模块和loader真实绝对路径
	//  3、new NormalModule() 创建 module 实例
	create(data, callback) {
		// 模块依赖
		const dependencies = /** @type {ModuleDependency[]} */ (data.dependencies);
		if (this.unsafeCache) {
			// 如果有缓存，则直接返回
			const cacheEntry = dependencyCache.get(dependencies[0]);
			if (cacheEntry) return callback(null, cacheEntry);
		}
		const context = data.context || this.context;
		const resolveOptions = data.resolveOptions || EMPTY_RESOLVE_OPTIONS;
		const dependency = dependencies[0];
		const request = dependency.request;
		const contextInfo = data.contextInfo;
		const fileDependencies = new LazySet();
		const missingDependencies = new LazySet();
		const contextDependencies = new LazySet();
		/** @type {ResolveData} */
		// 需要解决的数据
		const resolveData = {
			contextInfo,
			resolveOptions,
			context,
			request,
			dependencies,
			fileDependencies,
			missingDependencies,
			contextDependencies,
			createData: {},
			cacheable: true
		};
		// 解析前对 resolveData 进行检查
		this.hooks.beforeResolve.callAsync(resolveData, (err, result) => {
			if (err) {
				return callback(err, {
					fileDependencies,
					missingDependencies,
					contextDependencies
				});
			}

			// Ignored： 忽略
			if (result === false) {
				return callback(null, {
					fileDependencies,
					missingDependencies,
					contextDependencies
				});
			}

			if (typeof result === "object")
				throw new Error(
					deprecationChangedHookMessage(
						"beforeResolve",
						this.hooks.beforeResolve
					)
				);
      // 执行factory.hooks.factorize.call钩子，
			// 然后会调用ExternalModuleFactoryPlugin中注册的钩子，
			// 用于配置外部文件的模块加载方式， 例如fs, http, events等node原生方法
			this.hooks.factorize.callAsync(resolveData, (err, module) => {
				if (err) {
					return callback(err, {
						fileDependencies,
						missingDependencies,
						contextDependencies
					});
				}

				const factoryResult = {
					module,
					fileDependencies,
					missingDependencies,
					contextDependencies
				};

				if (
					this.unsafeCache &&
					resolveData.cacheable &&
					module &&
					this.cachePredicate(module)
				) {
					for (const d of dependencies) {
						dependencyCache.set(d, factoryResult);
					}
				}

				callback(null, factoryResult);
			});
		});
	}
	...
  // 返回解析器：解析器是用来解析 JS 模块的
	getParser(type, parserOptions = EMPTY_PARSER_OPTIONS) {
		...
		parser = this.createParser(type, parserOptions);
		...
		return parser;
	}

	/**
	 * 创建解析器
	 * @param {*} type 解析器类型
	 * @param {*} parserOptions 解析器配置
	 * JS 类型的parser 分为3种：“auto”, "script", "module"
	 * 根据模块的需求，factory 帮我们匹配不同的解析器（parser）
	 */
	createParser(type, parserOptions = {}) {...}
  
	// 返回生成器：
	getGenerator(type, generatorOptions = EMPTY_GENERATOR_OPTIONS) {
		...
		generator = this.createGenerator(type, generatorOptions);
		...
		return generator;
	}
  
	/**
	 * 创建生成器
	 * @param {*} type 生成器类型
	 * @param {*} generatorOptions 生成器配置
	 * JS 类型的 generator 分为 3 种：“auto”, "script", "module"
	 * 根据模块的需求，factory 帮我们匹配不同的生成器（generator）
	 */
	createGenerator(type, generatorOptions = {}) {...}

	getResolver(type, resolveOptions) {
		// 通过 enhanced-resolve 得到真实的路径
		/**
		 * webpack 使用 enhanced-resolve 来进行模块解析
		 * 它的作用类似于一个异步的 require.resolve 方法，
		 * 将一个 require/import 的语句中的引入字符串，解析为引入文件的绝对路径
		 * 
		 * 这里：ResolverFactory.createResolver 方法，生成了一个 Resolver 对象，并将它的 resolve 方法暴露给外部
		 */ 
		return this.resolverFactory.get(type, resolveOptions);
	}
}

module.exports = NormalModuleFactory;

create(data, callback) {
		// 模块依赖
		const dependencies = /** @type {ModuleDependency[]} */ (data.dependencies);
		if (this.unsafeCache) {
			// 如果有缓存，则直接返回
			const cacheEntry = dependencyCache.get(dependencies[0]);
			if (cacheEntry) return callback(null, cacheEntry);
		}
		...
		const resolveData = {
			contextInfo,
			resolveOptions,
			context,
			request,
			dependencies,
			fileDependencies,
			missingDependencies,
			contextDependencies,
			createData: {},
			cacheable: true
		};
		// 解析前对 resolveData 进行检查
		this.hooks.beforeResolve.callAsync(resolveData, (err, result) => {
			...
      // 执行factory.hooks.factorize.call钩子，
			// 然后会调用 ExternalModuleFactoryPlugin 中注册的钩子，
			// 用于配置外部文件的模块加载方式， 例如fs, http, events等node原生方法
			this.hooks.factorize.callAsync(resolveData, (err, module) => {
				...
				const factoryResult = {
					module,
					fileDependencies,
					missingDependencies,
					contextDependencies
				};
				...
				callback(null, factoryResult);
			});
		});
	}

// 返回解析器：解析器是用来解析 JS 模块的
getParser(type, parserOptions = EMPTY_PARSER_OPTIONS) {
  ...
  parser = this.createParser(type, parserOptions);
  ...
  return parser;
}

/**
 * 创建解析器
 * @param {*} type 解析器类型
 * @param {*} parserOptions 解析器配置
 * JS 类型的 parser 分为3种：“auto”, "script", "module"
 * 根据模块的需求，factory 帮我们匹配不同的解析器（parser）
 */
createParser(type, parserOptions = {}) {
  ...
  const parser = this.hooks.createParser.for(type).call(parserOptions);
  ...
}

// JavascriptModulesPlugin.js
apply(compiler) {
		compiler.hooks.compilation.tap(
			"JavascriptModulesPlugin",
			(compilation, { normalModuleFactory }) => {
				....
				// createParser 注册了 3 个类型；auto、script、module
				// 根据不同的需求，normalModuleFactory 使用不同的 parser
				normalModuleFactory.hooks.createParser
					.for("javascript/auto")
					.tap("JavascriptModulesPlugin", options => {
						return new JavascriptParser("auto");
					});
				normalModuleFactory.hooks.createParser
					.for("javascript/dynamic")
					.tap("JavascriptModulesPlugin", options => {
						return new JavascriptParser("script");
					});
				normalModuleFactory.hooks.createParser
					.for("javascript/esm")
					.tap("JavascriptModulesPlugin", options => {
						return new JavascriptParser("module");
					});
					}
       ...
		);
  }

// 返回生成器：
getGenerator(type, generatorOptions = EMPTY_GENERATOR_OPTIONS) {
  ...
  generator = this.createGenerator(type, generatorOptions);
  ...
  return generator;
}

/**
 * 创建生成器
 * @param {*} type 生成器类型
 * @param {*} generatorOptions 生成器配置
 * JS 类型的 generator 分为 3 种：“auto”, "script", "module"
 * 根据模块的需求，factory 帮我们匹配不同的生成器（generator）
 */
createGenerator(type, generatorOptions = {}) {
  ...
  	const generator = this.hooks.createGenerator
			.for(type)
			.call(generatorOptions);
  ...
}

// JavascriptModulesPlugin.js
apply(compiler) {
		compiler.hooks.compilation.tap(
			"JavascriptModulesPlugin",
			(compilation, { normalModuleFactory }) => {
				....
				// createGenerator 注册了 3 个类型；“auto”, "script", "module"
				// 之后通过 JavascriptGenerator 统一处理
				normalModuleFactory.hooks.createGenerator
					.for("javascript/auto")
					.tap("JavascriptModulesPlugin", () => {
						return new JavascriptGenerator();
					});
				normalModuleFactory.hooks.createGenerator
					.for("javascript/dynamic")
					.tap("JavascriptModulesPlugin", () => {
						return new JavascriptGenerator();
					});
				normalModuleFactory.hooks.createGenerator
					.for("javascript/esm")
					.tap("JavascriptModulesPlugin", () => {
						return new JavascriptGenerator();
					});
       ...
		);
  }

getResolver(type, resolveOptions) {
  // 通过 enhanced-resolve 得到真实的路径
  /**
   * webpack 使用 enhanced-resolve 来进行模块路径解析
   * 它的作用类似于一个异步的 require.resolve 方法，
   * 将一个 require/import 的语句中的引入字符串，解析为引入文件的绝对路径
   * 
   * 这里：ResolverFactory.createResolver 方法，生成了一个 Resolver 对象，并将它的 resolve 方法暴露给外部
   */ 
  return this.resolverFactory.get(type, resolveOptions);
}

// ResolverFactory.js
const Factory = require("enhanced-resolve").ResolverFactory;
...
get(type, resolveOptions = EMPTY_RESOLVE_OPTIONS) {
  ...
  const newResolver = this._create(type, resolveOptions);
  ...
  return newResolver;
}
_create(type, resolveOptionsWithDepType) {
  ...
  const resolver = Factory.createResolver(resolveOptions);
  ...
  return resolver;
}

compiler.hooks.finishMake.tapPromise("ProvideSharedPlugin", compilation => {
			const resolvedProvideMap = compilationData.get(compilation);
			if (!resolvedProvideMap) return Promise.resolve();
			return Promise.all(
				Array.from(
					resolvedProvideMap,
					([resource, { config, version }]) =>
						new Promise((resolve, reject) => {
							compilation.addInclude(
								compiler.context,
								new ProvideSharedDependency(...),
								{
									name: undefined
								},
								err => {...}
							);
						})
				)
			).then(() => {});
		});

addEntry(context, entry, optionsOrName, callback) {
	...
	this._addEntryItem(context, entry, "dependencies", options, callback);
}

addInclude(context, dependency, options, callback) {
  this._addEntryItem(
    context,
    dependency,
    "includeDependencies",
    options,
    callback
  );
}

apply(compiler) {
		...
		new ProvideSharedPlugin({
			shareScope: this._shareScope,
			provides: this._provides
		}).apply(compiler);
	}

// 引入
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')

// 插件数组里边添加
plugins:[
    // 检查 windows macos linux 不同系统下的路径问题
    new CaseSensitivePathsPlugin({
      debug: false
    })
]

import clipboard from "Clipboard" // linux 下会报错

import clipboard from "clipboard" // 正确