源码太多，边听歌曲边看吧！

理解插件的书写格式：

// 简单插件
class MyPlugin {constructor (options) {console.log(options)}apply (compiler) {compiler.hooks.done.tap('MyPlugin', () => {console.log('构建结束')})}
}

// 复杂插件
class AssetPlugin {constructor(options) {this.options = options;}apply(compiler) {compiler.hooks.compilation.tap('AssetPlugin', (compilation) => {compilation.hooks.chunkAsset.tap('AssetPlugin', (chunk, filename) => {console.log(chunk.name || chunk.id, filename);});});}
}

compiler 对象代表了完整的 webpack 环境配置，这个对象在启动 webpack 时被一次性建立。compilation 对象代表了一次资源版本构建，每次 watch 会重新生成。

compiler.hooks.done.tap 这个怎么来的，我们怎么知道有哪些钩子？

class Compiler {/*** @param {string} context the compilation path*/constructor(context) {this.hooks = Object.freeze({/** @type {SyncHook<[]>} */initialize: new SyncHook([]),/** @type {SyncBailHook<[Compilation], boolean>} */shouldEmit: new SyncBailHook(["compilation"]),/** @type {AsyncSeriesHook<[Stats]>} */done: new AsyncSeriesHook(["stats"]),/** @type {SyncHook<[Stats]>} */afterDone: new SyncHook(["stats"]),/** @type {AsyncSeriesHook<[]>} */additionalPass: new AsyncSeriesHook([]),/** @type {AsyncSeriesHook<[Compiler]>} */beforeRun: new AsyncSeriesHook(["compiler"]),/** @type {AsyncSeriesHook<[Compiler]>} */run: new AsyncSeriesHook(["compiler"]),/** @type {AsyncSeriesHook<[Compilation]>} */emit: new AsyncSeriesHook(["compilation"]),/** @type {AsyncSeriesHook<[string, AssetEmittedInfo]>} */assetEmitted: new AsyncSeriesHook(["file", "info"]),/** @type {AsyncSeriesHook<[Compilation]>} */afterEmit: new AsyncSeriesHook(["compilation"]),/** @type {SyncHook<[Compilation, CompilationParams]>} */thisCompilation: new SyncHook(["compilation", "params"]),/** @type {SyncHook<[Compilation, CompilationParams]>} */compilation: new SyncHook(["compilation", "params"]),/** @type {SyncHook<[NormalModuleFactory]>} */normalModuleFactory: new SyncHook(["normalModuleFactory"]),/** @type {SyncHook<[ContextModuleFactory]>}  */contextModuleFactory: new SyncHook(["contextModuleFactory"]),/** @type {AsyncSeriesHook<[CompilationParams]>} */beforeCompile: new AsyncSeriesHook(["params"]),/** @type {SyncHook<[CompilationParams]>} */compile: new SyncHook(["params"]),/** @type {AsyncParallelHook<[Compilation]>} */make: new AsyncParallelHook(["compilation"]),/** @type {AsyncParallelHook<[Compilation]>} */finishMake: new AsyncSeriesHook(["compilation"]),/** @type {AsyncSeriesHook<[Compilation]>} */afterCompile: new AsyncSeriesHook(["compilation"]),/** @type {AsyncSeriesHook<[Compiler]>} */watchRun: new AsyncSeriesHook(["compiler"]),/** @type {SyncHook<[Error]>} */failed: new SyncHook(["error"]),/** @type {SyncHook<[string | null, number]>} */invalid: new SyncHook(["filename", "changeTime"]),/** @type {SyncHook<[]>} */watchClose: new SyncHook([]),/** @type {AsyncSeriesHook<[]>} */shutdown: new AsyncSeriesHook([]),/** @type {SyncBailHook<[string, string, any[]], true>} */infrastructureLog: new SyncBailHook(["origin", "type", "args"]),// TODO the following hooks are weirdly located here// TODO move them for webpack 5/** @type {SyncHook<[]>} */environment: new SyncHook([]),/** @type {SyncHook<[]>} */afterEnvironment: new SyncHook([]),/** @type {SyncHook<[Compiler]>} */afterPlugins: new SyncHook(["compiler"]),/** @type {SyncHook<[Compiler]>} */afterResolvers: new SyncHook(["compiler"]),/** @type {SyncBailHook<[string, Entry], boolean>} */entryOption: new SyncBailHook(["context", "entry"])});

打开源码看到如此多的钩子，我们看到的 SyncHook 和 SyncBailHook 等等这样的 hook 又来自哪里，这个是 tapable 库里面的。

每当 compiler 开始一次新的构建，创建一个新的 compilation 实例，会触发一次钩子事件，所以必须在 compiler.hooks.compilation.tap 里面拿到 compilation。

class Compilation {createCompilation() {this._cleanupLastCompilation();return (this._lastCompilation = new Compilation(this));}/*** @param {CompilationParams} params the compilation parameters* @returns {Compilation} the created compilation*/newCompilation(params) {const compilation = this.createCompilation();compilation.name = this.name;compilation.records = this.records;this.hooks.thisCompilation.call(compilation, params);this.hooks.compilation.call(compilation, params);return compilation;}

那么 compilation 里面有哪些钩子呢？

class Compilation {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([]),// TODO webpack 6 remove/** @deprecated */additionalChunkAssets: createProcessAssetsHook("additionalChunkAssets",Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,() => [this.chunks],"DEP_WEBPACK_COMPILATION_ADDITIONAL_CHUNK_ASSETS"),// TODO webpack 6 deprecate/** @deprecated */additionalAssets: createProcessAssetsHook("additionalAssets",Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,() => []),// TODO webpack 6 remove/** @deprecated */optimizeChunkAssets: createProcessAssetsHook("optimizeChunkAssets",Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,() => [this.chunks],"DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS"),// TODO webpack 6 remove/** @deprecated */afterOptimizeChunkAssets: createProcessAssetsHook("afterOptimizeChunkAssets",Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE + 1,() => [this.chunks],"DEP_WEBPACK_COMPILATION_AFTER_OPTIMIZE_CHUNK_ASSETS"),// TODO webpack 6 deprecate/** @deprecated */optimizeAssets: processAssetsHook,// TODO webpack 6 deprecate/** @deprecated */afterOptimizeAssets: afterProcessAssetsHook,processAssets: processAssetsHook,afterProcessAssets: afterProcessAssetsHook,/** @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();}});