關於Webpack詳述系列文章 （第三篇）

1. 類圖 

1. 模塊

Module是webpack中最核心的類，要加載定的一切和依賴都是Module. 它有不少子類

• RawModule
• NormalModule
• MultiModule
• ContextModule
• DelegatedModule
• DllModule
• ExternalModule

2. 依賴 

• Module類繼承自DependenciesBlock，它有一個dependencies數組，表示此模塊依賴的其餘模塊。
• webpack使用Dependency的各類子類來表示不一樣的模塊加載規範，每一個規範都有本身的DependencyParserPlugin來加載
  • AMDRequireDependency
  • AMDDefineDependency
  • AMDRequireArrayDependency
  • CommonJsRequireDependency
  • SystemImportDependency
• 每一個Dependency都有本身的Template方法，用來生成加載該依賴模塊定的JS代碼
• 不一樣的模塊工廠能夠生產不一樣的模塊

3.執行流程 

• compile 開始編譯
• make 從入口點分析模塊及其依賴的模塊，建立這些模塊對象
• build-module 構建模塊
• after-compile 完成構建
• seal 封裝構建結果
• emit 把各個chunk輸出到結果文件
• after-emit 完成輸出

3.1 編譯核心對象 Compilation

this.compiler = compiler;       //Compiler對象
this.resolvers = compiler.resolvers;   //模塊解析器
this.mainTemplate = new MainTemplate(this.outputOptions);   //生成主模塊JS
this.chunkTemplate = new ChunkTemplate(this.outputOptions, this.mainTemplate);//異步加載的模塊JS
this.hotUpdateChunkTemplate = new HotUpdateChunkTemplate(this.outputOptions);//熱更新是的代碼塊模版JS
this.moduleTemplate = new ModuleTemplate(this.outputOptions); //入口模塊代碼
this.entries = []; //入口
this.preparedChunks = [];//預先加載的chunk
this.chunks = [];//全部的chunk
this.namedChunks = {};//每一個都對應一個名字，能夠經過namedChunks[name]獲取chunk
this.modules = []; //全部module
this.assets = {}; //保存全部生成的文件
this.children = []; // 保存子Compilation對象，子Compilation對象依賴它的上級Compilation對象生成的結果，因此要等父Compilation編譯完成才能開始。
this.dependencyFactories = new ArrayMap();//保存Dependency和ModuleFactory的對應關係，方便建立該依賴對應的Module
this.dependencyTemplates = new ArrayMap();   //保存Dependency和Template對應關係，方便生成加載此模塊的代碼

3.2 開始模塊編譯

• SingleEntryPlugin,MultiEntryPlugin兩個插件中註冊了對make事件的監聽，當Compiler執行make時，觸發對 Compilation.addEntry方法的調用. 在addEntry方法內調用私有方法_addModuleChain
• 使用acorn生成AST，並遍歷AST收集依賴
• webpack使用acorn解析每個經loader處理過的source，而且成AST，而後遍歷全部節點，當遇到require調用時，會分析是AMD的仍是CMD的調用，或者是require.ensure.
• webpack在build模塊時 (調用doBuild方法)，要先調用相應的loader對source進行加工，生成一段JS代碼後交給acorn解析生成AST.因此無論是css文件，仍是jpg文件，仍是html模版，最終通過loader處理會變成一個module
• 好比url-loader，根據loader配置生成一段dataURL或者使用調用loadercontext的emitFile方法向assets添加一個文件

  _addModuleChain(context, dependency, onModule, callback) {
    //根據依賴模塊的類型獲取對應的模塊工廠，用於後邊建立模塊。
    const moduleFactory = this.dependencyFactories.get(dependency.constructor);
    //使用模塊工廠建立模塊，並將建立出來的module做爲參數傳給回調方法:就是下邊`function(err, module)`的參數
     moduleFactory.create((err, module) => {
         const addModuleResult = this.addModule(module);
         //下面要對module進行build了。包括調用loader處理源文件，使用acorn生成AST，將遍歷AST,遇到requirt等依賴時，建立依賴(Dependency)加入依賴數組
         this.buildModule(module, false, null, null, err => {
             //module已經build完了，依賴也收集好了，開始處理依賴的module
            this.processModuleDependencies(module, err => {
                callback(null, module);
            });
         });
     })
  }

3.3 開始封裝

• 調用seal方法封裝，要逐次對每一個module和chunk進行整理，生成編譯後的源碼，合併，拆分，生成hash
• webpack會根據不一樣的插件，如MinChunkSizePlugin,LimitChunkCountPlugin 將不一樣的module整理到不一樣的chunk裏，每一個chunk最終對應一個輸出文件
• 此時全部的module仍然保存的是編譯前的 原始文件內容。webpack會把源代碼裏的reuqire調用換成webpack模塊加載代碼,也就是最終編譯後的代碼

3.4 經過Template生成結果代碼

調用compilation類裏的createChunkAssets方法

//若是是入口，則使用MainTemplate生成結果，不然使用ChunkTemplate
const template = chunk.hasRuntime()
                    ? this.mainTemplate
                    : this.chunkTemplate;
在MainTemplate和ChunkTemplate須要根據依賴的模塊，逐個調用ModuleTemplate的render方法

render(module, dependencyTemplates, options) {
    //生成該模塊結果代碼的方法,source是一個抽象方法，在Module的不一樣子類裏會重寫該方法
    const moduleSource = module.source(
            dependencyTemplates,
            this.runtimeTemplate
        );
}

在子類NormalModule的source方法裏，必須把源代碼中的require()引入的模塊代碼替換成webpack的模塊加載代碼 NormalModule.js

source(dependencyTemplates, runtimeTemplate) {
    const source = this.generator.generate(
            this,
            dependencyTemplates,
            runtimeTemplate
        );
}
class JavascriptGenerator {
    //source是一個ReplaceSource,可利用dep參數的range屬性定位require調用在源碼中的位置，從而實現替換
    //range: 根據paser:acorn的文檔說明，保存了AST節點在源碼中的起始位置和結束位置[ start , end ]
    //export default 'hello'; 會轉換爲
    //"/* harmony default export */ var __WEBPACK_MODULE_DEFAULT_EXPORT__ = ('hello');"
    generate(module, dependencyTemplates, runtimeTemplate) {
        const source = new ReplaceSource(originalSource);
    }
}

3.5 輸出到結果文件

webpack會在Compiler的emitAssets方法裏把compilation.assets裏的結果寫到輸出文件裏，在此前會先建立輸出目錄。 因此當你要開發一些自定義的插件要輸出一些結果時，把文件放入compilation.assets裏便可。

3.6 調試

npm i vscode-webpack-debugger -D

3.7 日誌

3.7.1 註冊流程

tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync FileKindPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tapAsync ModuleAppendPlugin
tap Compiler
tap ResolverFactory
tap NodeEnvironmentPlugin
tap JsonpTemplatePlugin
tap FetchCompileWasmTemplatePlugin
tap FunctionModulePlugin
tap NodeSourcePlugin
tap LoaderTargetPlugin
tap JavascriptModulesPlugin
tap JsonModulesPlugin
tap WebAssemblyModulesPlugin
tap EntryOptionPlugin
tap SingleEntryPlugin
tapAsync SingleEntryPlugin
tap CompatibilityPlugin
tap HarmonyModulesPlugin
tap AMDPlugin
tap CommonJsPlugin
tap LoaderPlugin
tap NodeStuffPlugin
tap RequireJsStuffPlugin
tap APIPlugin
tap ConstPlugin
tap UseStrictPlugin
tap RequireIncludePlugin
tap RequireEnsurePlugin
tap RequireContextPlugin
tap ImportPlugin
tap SystemPlugin
tap WarnNoModeSetPlugin
tap EnsureChunkConditionsPlugin
tap RemoveParentModulesPlugin
tap RemoveEmptyChunksPlugin
tap MergeDuplicateChunksPlugin
tap FlagIncludedChunksPlugin
tap OccurrenceOrderPlugin
tap SideEffectsFlagPlugin
tap FlagDependencyExportsPlugin
tap FlagDependencyUsagePlugin
tap ModuleConcatenationPlugin
tap SplitChunksPlugin
tap NoEmitOnErrorsPlugin
tap DefinePlugin
tap { name: 'UglifyJSPlugin' }
tap SizeLimitsPlugin
tap TemplatedPathPlugin
tap RecordIdsPlugin
tap WarnCaseSensitiveModulesPlugin
tap WebpackOptionsApply
Compiler:before-run
Compiler:run
tap NormalModuleFactory
normal-module-factory
tap ContextModuleFactory
Compiler:context-module-factory
Compiler:before-compile
Compiler:compile
tap Compilation
tap MainTemplate
Compiler:this-compilation
tap JsonpMainTemplatePlugin
tap JsonpChunkTemplatePlugin
tap JsonpHotUpdateChunkTemplatePlugin
tap FetchCompileWasmMainTemplatePlugin
tap WasmModuleTemplatePlugin
Compiler:compilation
tap FunctionModuleTemplatePlugin
tapAsync { name: 'UglifyJSPlugin' }
tapAsync UnsafeCachePlugin
    ResolverFactory:resolver
tapAsync AliasFieldPlugin
tapAsync AliasPlugin
    Resolver:resolveStep
tap Parser
    NormalModuleFactory:parser
tap HarmonyDetectionParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyTopLevelThisParserPlugin
tap AMDRequireDependenciesBlockParserPlugin
tap AMDDefineDependencyParserPlugin
tap CommonJsRequireDependencyParserPlugin
tap RequireResolveDependencyParserPlugin
tap RequireIncludeDependencyParserPlugin
tap RequireEnsureDependenciesBlockParserPlugin
tap RequireContextDependencyParserPlugin
tap ImportParserPlugin

2.2 觸發流程

Compiler:before-run
Compiler:run
normal-module-factory
Compiler:context-module-factory
Compiler:before-compile
Compiler:compile
Compiler:this-compilation
Compiler:compilation
Compiler:make
    NormalModuleFactory:before-resolve
    NormalModuleFactory:factory
    NormalModuleFactory:resolver
    ResolverFactory:resolve-options
    ResolverFactory:resolver
    Resolver:resolveStep
    NormalModuleFactory:parser
    NormalModuleFactory:generator
    NormalModuleFactory:after-resolve
    NormalModuleFactory:create-module
    NormalModuleFactory:module
  Compilation:build-module
  Compilation:succeed-module
  Compilation:finish-modules
  Compilation:seal
  Compilation:optimize-dependencies-basic
  Compilation:optimize-dependencies
  Compilation:optimize-dependencies-advanced
  Compilation:after-optimize-dependencies
  Compilation:optimize
  Compilation:optimize-modules-basic
  Compilation:optimize-modules
  Compilation:optimize-modules-advanced
  Compilation:after-optimize-modules
  Compilation:optimize-chunks-basic
  Compilation:optimize-chunks
  Compilation:optimize-chunks-advanced
  Compilation:after-optimizeChunks
  Compilation:optimize-tree
  Compilation:after-optimize-tree
  Compilation:optimize-chunk-modules-basic
  Compilation:optimize-chunk-modules
  Compilation:optimize-chunk-modules-advanced
  Compilation:after-optimize-chunk-modules
  Compilation:should-record
  Compilation:revive-modules
  Compilation:optimize-moduleOrder
  Compilation:advanced-optimize-module-order
  Compilation:before-moduleIds
  Compilation:module-ids
  Compilation:optimize-module-ids
  Compilation:after-optimize-module-ids
  Compilation:revive-chunks
  Compilation:optimize-chunk-order
  Compilation:before-chunk-ids
  Compilation:optimize-chunk-ids
  Compilation:after-optimize-chunk-ids
  Compilation:record-modules
  Compilation:record-chunks
  Compilation:before-hash
    MainTemplate:hash
    ChunkTemplate:hash
    ModuleTemplate:hash
    MainTemplate:hash-for-chunk
  Compilation:chunk-hash
  Compilation:after-hash
  Compilation:record-hash
  Compilation:before-module-assets
  Compilation:should-generate-chunk-assets
  Compilation:before-chunk-assets
    MainTemplate:render-manifest
    MainTemplate:global-hash-paths
    MainTemplate:bootstrap
    MainTemplate:localVars
    MainTemplate:require
    MainTemplate:require-extensions
    MainTemplate:asset-path
    MainTemplate:before-startup
    MainTemplate:startup
    ModuleTemplate:content
    ModuleTemplate:module
    ModuleTemplate:render
    ModuleTemplate:package
    MainTemplate:render-with-entry
  Compilation:chunk-asset
  Compilation:additional-chunk-assets
  Compilation:record
  Compilation:additional-assets
  Compilation:optimize-chunk-assets
  Compilation:after-optimize-chunk-assets
  Compilation:optimize-assets
  Compilation:after-optimize-assets
  Compilation:need-additional-seal
  Compilation:after-seal
Compiler:after-compile
Compiler:should-emit
Compiler:emit
Compiler:after-emit
Compiler:done

2.3 完整流程

tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync ModuleAppendPlugin
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync ModuleAppendPlugin
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Compiler
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap ResolverFactory
tap NodeEnvironmentPlugin
tap JsonpTemplatePlugin
tap FetchCompileWasmTemplatePlugin
tap FunctionModulePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap LoaderTargetPlugin
tap JavascriptModulesPlugin
tap JsonModulesPlugin
tap WebAssemblyModulesPlugin
tap EntryOptionPlugin
tap SingleEntryPlugin
tapAsync SingleEntryPlugin
tap CompatibilityPlugin
tap HarmonyModulesPlugin
tap AMDPlugin
tap AMDPlugin
tap CommonJsPlugin
tap LoaderPlugin
tap LoaderPlugin
tap NodeStuffPlugin
tap RequireJsStuffPlugin
tap APIPlugin
tap ConstPlugin
tap UseStrictPlugin
tap RequireIncludePlugin
tap RequireEnsurePlugin
tap RequireContextPlugin
tap ImportPlugin
tap SystemPlugin
tap WarnNoModeSetPlugin
tap EnsureChunkConditionsPlugin
tap RemoveParentModulesPlugin
tap RemoveEmptyChunksPlugin
tap MergeDuplicateChunksPlugin
tap FlagIncludedChunksPlugin
tap OccurrenceOrderPlugin
tap SideEffectsFlagPlugin
tap SideEffectsFlagPlugin
tap FlagDependencyExportsPlugin
tap FlagDependencyUsagePlugin
tap ModuleConcatenationPlugin
tap SplitChunksPlugin
tap NoEmitOnErrorsPlugin
tap NoEmitOnErrorsPlugin
tap DefinePlugin
tap { name: 'UglifyJSPlugin' }
tap SizeLimitsPlugin
tap TemplatedPathPlugin
tap RecordIdsPlugin
tap WarnCaseSensitiveModulesPlugin
tap WebpackOptionsApply
tap WebpackOptionsApply
tap WebpackOptionsApply
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap AMDPlugin
Compiler:before-run
Compiler:run
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap NormalModuleFactory
tap NormalModuleFactory
tap NormalModuleFactory
normal-module-factory
tap SideEffectsFlagPlugin
tap SideEffectsFlagPlugin
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap ContextModuleFactory
Compiler:context-module-factory
Compiler:before-compile
Compiler:compile
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Compilation
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap MainTemplate
tap MainTemplate
tap MainTemplate
tap MainTemplate
tap MainTemplate
tap MainTemplate
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
Compiler:this-compilation
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpMainTemplatePlugin
tap JsonpChunkTemplatePlugin
tap JsonpChunkTemplatePlugin
tap JsonpHotUpdateChunkTemplatePlugin
tap JsonpHotUpdateChunkTemplatePlugin
tap FetchCompileWasmMainTemplatePlugin
tap FetchCompileWasmMainTemplatePlugin
tap FetchCompileWasmMainTemplatePlugin
tap FetchCompileWasmMainTemplatePlugin
tap WasmModuleTemplatePlugin
tap WasmModuleTemplatePlugin
tap SplitChunksPlugin
tap SplitChunksPlugin
Compiler:compilation
tap FunctionModuleTemplatePlugin
tap FunctionModuleTemplatePlugin
tap FunctionModuleTemplatePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap LoaderTargetPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JavascriptModulesPlugin
tap JsonModulesPlugin
tap JsonModulesPlugin
tap WebAssemblyModulesPlugin
tap WebAssemblyModulesPlugin
tap WebAssemblyModulesPlugin
tap CompatibilityPlugin
tap HarmonyModulesPlugin
tap HarmonyModulesPlugin
tap AMDPlugin
tap AMDPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap LoaderPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap RequireJsStuffPlugin
tap RequireJsStuffPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap ConstPlugin
tap ConstPlugin
tap ConstPlugin
tap UseStrictPlugin
tap UseStrictPlugin
tap UseStrictPlugin
tap RequireIncludePlugin
tap RequireIncludePlugin
tap RequireEnsurePlugin
tap RequireEnsurePlugin
tap RequireContextPlugin
tap RequireContextPlugin
tap RequireContextPlugin
tap RequireContextPlugin
tap RequireContextPlugin
tap ImportPlugin
tap ImportPlugin
tap ImportPlugin
tap SystemPlugin
tap SystemPlugin
tap EnsureChunkConditionsPlugin
tap EnsureChunkConditionsPlugin
tap RemoveParentModulesPlugin
tap RemoveParentModulesPlugin
tap RemoveEmptyChunksPlugin
tap RemoveEmptyChunksPlugin
tap MergeDuplicateChunksPlugin
tap FlagIncludedChunksPlugin
tap OccurrenceOrderPlugin
tap OccurrenceOrderPlugin
tap SideEffectsFlagPlugin
tap FlagDependencyExportsPlugin
tap FlagDependencyExportsPlugin
tap FlagDependencyExportsPlugin
tap FlagDependencyUsagePlugin
tap ModuleConcatenationPlugin
tap ModuleConcatenationPlugin
tap ModuleConcatenationPlugin
tap ModuleConcatenationPlugin
tap NoEmitOnErrorsPlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
tapAsync { name: 'UglifyJSPlugin' }
tap TemplatedPathPlugin
tap TemplatedPathPlugin
tap TemplatedPathPlugin
tap RecordIdsPlugin
tap RecordIdsPlugin
tap RecordIdsPlugin
tap RecordIdsPlugin
tap WarnCaseSensitiveModulesPlugin
Compiler:make
    NormalModuleFactory:before-resolve
    NormalModuleFactory:factory
    NormalModuleFactory:resolver
    ResolverFactory:resolve-options
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync UnsafeCachePlugin
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
    ResolverFactory:resolver
    ResolverFactory:resolve-options
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Resolver: before/after
tap Resolver: step hooks
tapAsync UnsafeCachePlugin
tapAsync ParsePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync AliasFieldPlugin
tapAsync { stage: 10, name: 'ModuleKindPlugin' }
tapAsync { stage: 10, name: 'JoinRequestPlugin' }
tapAsync TryNextPlugin
tapAsync ModulesInHierachicDirectoriesPlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync FileKindPlugin
tapAsync TryNextPlugin
tapAsync DirectoryExistsPlugin
tapAsync MainFieldPlugin
tapAsync MainFieldPlugin
tapAsync MainFieldPlugin
tapAsync UseFilePlugin
tapAsync DescriptionFilePlugin
tapAsync { stage: 10, name: 'NextPlugin' }
tapAsync TryNextPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AppendPlugin
tapAsync AliasFieldPlugin
tapAsync SymlinkPlugin
tapAsync FileExistsPlugin
tapAsync NextPlugin
tapAsync ResultPlugin
    ResolverFactory:resolver
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
tapAsync AliasPlugin
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
    Resolver:resolveStep
tap { name: 'Tapable camelCase', stage: 100 }
tap { name: 'Tapable this.hooks', stage: 200 }
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
tap Parser
    NormalModuleFactory:parser
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap NodeSourcePlugin
tap CompatibilityPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyDetectionParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyImportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyExportDependencyParserPlugin
tap HarmonyTopLevelThisParserPlugin
tap AMDRequireDependenciesBlockParserPlugin
tap AMDDefineDependencyParserPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap AMDPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsPlugin
tap CommonJsRequireDependencyParserPlugin
tap CommonJsRequireDependencyParserPlugin
tap CommonJsRequireDependencyParserPlugin
tap RequireResolveDependencyParserPlugin
tap RequireResolveDependencyParserPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap NodeStuffPlugin
tap RequireJsStuffPlugin
tap RequireJsStuffPlugin
tap RequireJsStuffPlugin
tap RequireJsStuffPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap APIPlugin
tap ConstPlugin
tap ConstPlugin
tap ConstPlugin
tap ConstPlugin
tap UseStrictPlugin
tap RequireIncludeDependencyParserPlugin
tap RequireIncludePlugin
tap RequireIncludePlugin
tap RequireEnsureDependenciesBlockParserPlugin
tap RequireEnsurePlugin
tap RequireEnsurePlugin
tap RequireContextDependencyParserPlugin
tap ImportParserPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap SystemPlugin
tap ModuleConcatenationPlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
tap DefinePlugin
    NormalModuleFactory:generator
    NormalModuleFactory:after-resolve
    NormalModuleFactory:create-module
    NormalModuleFactory:module
  Compilation:build-module
  Compilation:succeed-module
  Compilation:finish-modules
  Compilation:seal
  Compilation:optimize-dependencies-basic
  Compilation:optimize-dependencies
  Compilation:optimize-dependencies-advanced
  Compilation:after-optimize-dependencies
  Compilation:optimize
  Compilation:optimize-modules-basic
  Compilation:optimize-modules
  Compilation:optimize-modules-advanced
  Compilation:after-optimize-modules
  Compilation:optimize-chunks-basic
  Compilation:optimize-chunks
  Compilation:optimize-chunks-advanced
  Compilation:after-optimizeChunks
  Compilation:optimize-tree
  Compilation:after-optimize-tree
  Compilation:optimize-chunk-modules-basic
  Compilation:optimize-chunk-modules
  Compilation:optimize-chunk-modules-advanced
  Compilation:after-optimize-chunk-modules
  Compilation:should-record
  Compilation:revive-modules
  Compilation:optimize-moduleOrder
  Compilation:advanced-optimize-module-order
  Compilation:before-moduleIds
  Compilation:module-ids
  Compilation:optimize-module-ids
  Compilation:after-optimize-module-ids
  Compilation:revive-chunks
  Compilation:optimize-chunk-order
  Compilation:before-chunk-ids
  Compilation:optimize-chunk-ids
  Compilation:after-optimize-chunk-ids
  Compilation:record-modules
  Compilation:record-chunks
  Compilation:before-hash
    MainTemplate:hash
    ChunkTemplate:hash
    ModuleTemplate:hash
    ModuleTemplate:hash
    MainTemplate:hash
    MainTemplate:hash-for-chunk
  Compilation:chunk-hash
  Compilation:after-hash
  Compilation:record-hash
  Compilation:before-module-assets
  Compilation:should-generate-chunk-assets
  Compilation:before-chunk-assets
    MainTemplate:render-manifest
    MainTemplate:global-hash-paths
    MainTemplate:bootstrap
    MainTemplate:localVars
    MainTemplate:require
    MainTemplate:require-extensions
    MainTemplate:asset-path
    MainTemplate:before-startup
    MainTemplate:startup
    ModuleTemplate:content
    ModuleTemplate:module
    ModuleTemplate:render
    ModuleTemplate:package
    MainTemplate:render-with-entry
    MainTemplate:asset-path
  Compilation:chunk-asset
  Compilation:additional-chunk-assets
  Compilation:record
  Compilation:additional-assets
  Compilation:optimize-chunk-assets
  Compilation:after-optimize-chunk-assets
  Compilation:optimize-assets
  Compilation:after-optimize-assets
  Compilation:need-additional-seal
  Compilation:after-seal
Compiler:after-compile
Compiler:should-emit
Compiler:emit
    MainTemplate:asset-path
Compiler:after-emit
Compiler:done

版本

• webpack 4.2.0
• webpack-cli 2.0.13
• vscode-webpack-debugger