Webpack 之详解

小四
前端
2023-01-24
15热度
0评论

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？

webpack的配置

const path =require(path); module.exports = { entry : "./app/entry" , // string | object | array // Webpack打包的入口 output : { // 定义webpack如何输出的选项 path : path . resolve ( __dirname , "dist" ), // string // 所有输出文件的目标路径 filename : "[chunkhash].js" , // string // 「入口(entry chunk)」文件命名模版 publicPath : "/assets/" , // string // 构建文件的输出目录 /* 其它高级配置 */ }, module : { // 模块相关配置 rules : [ // 配置模块loaders，解析规则 { test : /\.jsx?$/ , // RegExp | string include : [ // 和test一样，必须匹配选项 path . resolve ( __dirname , "app" ) ], exclude : [ // 必不匹配选项（优先级高于test和include） path . resolve ( __dirname , "app/demo-files" ) ], loader : "babel-loader" , // 模块上下文解析 options : { // loader的可选项 presets : [ "es2015" ] }, }, }, resolve : { // 解析模块的可选项 modules : [ // 模块的查找目录 "node_modules" , path . resolve ( __dirname , "app" ) ], extensions : [ ".js" , ".json" , ".jsx" , ".css" ], // 用到的文件的扩展 alias : { // 模块别名列表 "module" : "new-module" }, }, devtool : "source-map" , // enum // 为浏览器开发者工具添加元数据增强调试 plugins : [ // 附加插件列表 // ... ], }

从上面我们可以看到，webpack配置中需要理解几个核心的概念 Entry 、 Output、 Loaders 、 Plugins、 Chunk：

Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库Output：告诉webpack如何命名输出的文件以及输出的目录Loaders：由于webpack只能处理javascript，所以我们需要对一些非js文件处理成webpack能够处理的模块，比如sass文件Plugins： Loaders将各类型的文件处理成webpack能够处理的模块， plugins有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的 UglifyJsPlugin插件Chunk：coding split的产物，我们可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我们都利用 CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中 CommonsChunkPlugin被废弃，使用 SplitChunksPlugin

webpack详解

读到这里，或许你对webpack有一个大概的了解，那webpack 是怎么运行的呢？我们都知道，webpack是高度复杂抽象的插件集合，理解webpack的运行机制，对于我们日常定位构建错误以及写一些插件处理构建任务有很大的帮助。

不得不说的tapable

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的 Compiler和负责创建bundles的 Compilation都是Tapable的实例。在Tapable1.0之前，也就是webpack3及其以前使用的Tapable，提供了包括：

plugin(name:string,handler:function)注册插件到Tapable对象中apply(…pluginInstances:(AnyPlugin|function)[])调用插件的定义，将事件监听器注册到Tapable实例注册表中applyPlugins*(name:string,…)多种策略细致地控制事件的触发，包括 applyPluginsAsync、 applyPluginsParallel等方法实现对事件触发的控制，实现

（1）多个事件连续顺序执行

（2）并行执行

（3）异步执行

（4）一个接一个地执行插件，前面的输出是后一个插件的输入的瀑布流执行顺序

（5）在允许时停止执行插件，即某个插件返回了一个 undefined的值，即退出执行

我们可以看到，Tapable就像nodejs中 EventEmitter,提供对事件的注册 on和触发 emit,理解它很重要，看个栗子：比如我们来写一个插件

function CustomPlugin () {} CustomPlugin . prototype . apply = function ( compiler ) { compiler . plugin ( emit , pluginFunction ); }

在webpack的生命周期中会适时的执行：

this . apply *( "emit" , options )

当然上面提到的Tapable都是1.0版本之前的，如果想深入学习，可以查看Tapable和事件流(

https://segmentfault.com/a/1190000008060440)。

那1.0的Tapable又是什么样的呢？1.0版本发生了巨大的改变，不再是此前的通过 plugin注册事件，通过 applyPlugins*触发事件调用，那1.0的Tapable是什么呢？

暴露出很多的钩子，可以使用它们为插件创建钩子函数

const { SyncHook , SyncBailHook , SyncWaterfallHook , SyncLoopHook , AsyncParallelHook , AsyncParallelBailHook , AsyncSeriesHook , AsyncSeriesBailHook , AsyncSeriesWaterfallHook } = require ( "tapable" );

我们来看看怎么使用。

class Order { constructor () { this . hooks = { //hooks goods : new SyncHook ([ goodsId , number ]), consumer : new AsyncParallelHook ([ userId , orderId ]) } } queryGoods ( goodsId , number ) { this . hooks . goods . call ( goodsId , number ); } consumerInfoPromise ( userId , orderId ) { this . hooks . consumer . promise ( userId , orderId ). then (() => { //TODO }) } consumerInfoAsync ( userId , orderId ) { this . hooks . consumer . callAsync ( userId , orderId , ( err , data ) => { //TODO }) } }

对于所有的hook的构造函数均接受一个可选的string类型的数组。

const hook = new SyncHook ([ "arg1" , "arg2" , "arg3" ]); // 调用tap方法注册一个consument order . hooks . goods . tap ( QueryPlugin , ( goodsId , number ) => { return fetchGoods ( goodsId , number ); }) // 再添加一个 order . hooks . goods . tap ( LoggerPlugin , ( goodsId , number ) => { logger ( goodsId , number ); }) // 调用 order . queryGoods ( 10000000 , 1 )

对于一个 SyncHook,我们通过 tap来添加消费者，通过 call来触发钩子的顺序执行。

对于一个非 sync*类型的钩子，即 async*类型的钩子，我们还可以通过其它方式注册消费者和调用

// 注册一个sync 钩子 order . hooks . consumer . tap ( LoggerPlugin , ( userId , orderId ) => { logger ( userId , orderId ); }) order . hooks . consumer . tapAsync ( LoginCheckPlugin , ( userId , orderId , callback ) => { LoginCheck ( userId , callback ); }) order . hooks . consumer . tapPromise ( PayPlugin , ( userId , orderId ) => { return Promise . resolve (); }) // 调用 // 返回Promise order . consumerInfoPromise ( user007 , 1024 ); //回调函数 order . consumerInfoAsync ( user007 , 1024 )

通过上面的栗子，你可能已经大致了解了 Tapable的用法，它的用法：

插件注册数量插件注册的类型（sync, async, promise）调用的方式（sync, async, promise）实例钩子的时候参数数量是否使用了 interception

Tapable详解

对于 Sync*类型的钩子来说：

注册在该钩子下面的插件的执行顺序都是顺序执行。只能使用 tap注册，不能使用 tapPromise和 tapAsync注册// 所有的钩子都继承于Hook class Sync * extends Hook { tapAsync () { // Sync*类型的钩子不支持tapAsync throw new Error ( "tapAsync is not supported on a Sync*" ); } tapPromise () { // Sync*类型的钩子不支持tapPromise throw new Error ( "tapPromise is not supported on a Sync*" ); } compile ( options ) { // 编译代码来按照一定的策略执行Plugin factory . setup ( this , options ); return factory . create ( options ); } }

对于 Async*类型钩子：支持 tap、 tapPromise、 tapAsync注册。

class AsyncParallelHook extends Hook { constructor ( args ) { super ( args ); this . call = this . _call = undefined ; } compile ( options ) { factory . setup ( this , options ); return factory . create ( options ); } } class Hook { constructor ( args ) { if (! Array . isArray ( args )) args = []; this . _args = args ; // 实例钩子的时候的string类型的数组 this . taps = []; // 消费者 this . interceptors = []; // interceptors this . call = this . _call = // 以sync类型方式来调用钩子 this . _createCompileDelegate ( "call" , "sync" ); this . promise = this . _promise = // 以promise方式 this . _createCompileDelegate ( "promise" , "promise" ); this . callAsync = this . _callAsync = // 以async类型方式来调用 this . _createCompileDelegate ( "callAsync" , "async" ); this . _x = undefined ; // } _createCall ( type ) { return this . compile ({ taps : this . taps , interceptors : this . interceptors , args : this . _args , type : type }); } _createCompileDelegate ( name , type ) { const lazyCompileHook = (... args ) => { this [ name ] = this . _createCall ( type ); return this [ name ](... args ); }; return lazyCompileHook ; } // 调用tap 类型注册 tap ( options , fn ) { // ... options = Object . assign ({ type : "sync" , fn : fn }, options ); // ... this . _insert ( options ); // 添加到 this.taps中 } // 注册 async类型的钩子 tapAsync ( options , fn ) { // ... options = Object . assign ({ type : "async" , fn : fn }, options ); // ... this . _insert ( options ); // 添加到 this.taps中 } 注册 promise 类型钩子 tapPromise ( options , fn ) { // ... options = Object . assign ({ type : "promise" , fn : fn }, options ); // ... this . _insert ( options ); // 添加到 this.taps中 } }

每次都是调用 tap、 tapSync、 tapPromise注册不同类型的插件钩子，通过调用 call、 callAsync 、 promise方式调用。其实调用的时候为了按照一定的执行策略执行，调用 compile方法快速编译出一个方法来执行这些插件。

compile中调用 HookCodeFactory#create方法编译生成执行代码。

class HookCodeFactory { constructor ( config ) { this . config = config ; this . options = undefined ; } create ( options ) { this . init ( options ); switch ( this . options . type ) { case "sync" : // 编译生成sync, 结果直接返回 return new Function ( this . args (), "\"use strict\";\n" + this . header () + this . content ({ // ... onResult : result => ` return $ { result }; \n `, // ... })); case "async" : // async类型, 异步执行，最后将调用插件执行结果来调用callback, return new Function ( this . args ({ after : "_callback" }), "\"use strict\";\n" + this . header () + this . content ({ // ... onResult : result => ` _callback ( null , $ { result }); \n `, onDone : () => "_callback();\n" })); case "promise" : // 返回promise类型，将结果放在resolve中 // ... code += "return new Promise((_resolve, _reject) => {\n" ; code += "var _sync = true;\n" ; code += this . header (); code += this . content ({ // ... onResult : result => ` _resolve ( $ { result }); \n `, onDone : () => "_resolve();\n" }); // ... return new Function ( this . args (), code ); } } // callTap 就是执行一些插件，并将结果返回 callTap ( tapIndex , { onError , onResult , onDone , rethrowIfPossible }) { let code = "" ; let hasTapCached = false ; // ... code += ` var _fn$ { tapIndex } = $ { this . getTapFn ( tapIndex )}; \n `; const tap = this . options . taps [ tapIndex ]; switch ( tap . type ) { case "sync" : // ... if ( onResult ) { code += ` var _result$ { tapIndex } = _fn$ { tapIndex }( $ { this . args ({ before : tap . context ? "_context" : undefined })}); \n `; } else { code += ` _fn$ { tapIndex }( $ { this . args ({ before : tap . context ? "_context" : undefined })}); \n `; } if ( onResult ) { // 结果透传 code += onResult (` _result$ { tapIndex }`); } if ( onDone ) { // 通知插件执行完毕，可以执行下一个插件 code += onDone (); } break ; case "async" : //异步执行，插件运行完后再将结果通过执行callback透传 let cbCode = "" ; if ( onResult ) cbCode += `( _err$ { tapIndex }, _result$ { tapIndex }) => { \n `; else cbCode += ` _err$ { tapIndex } => { \n `; cbCode += ` if ( _err$ { tapIndex }) { \n `; cbCode += onError (` _err$ { tapIndex }`); cbCode += "} else {\n" ; if ( onResult ) { cbCode += onResult (` _result$ { tapIndex }`); } cbCode += "}\n" ; cbCode += "}" ; code += ` _fn$ { tapIndex }( $ { this . args ({ before : tap . context ? "_context" : undefined , after : cbCode //cbCode将结果透传 })}); \n `; break ; case "promise" : // _fn${tapIndex} 就是第tapIndex 个插件，它必须是个Promise类型的插件 code += ` var _hasResult$ { tapIndex } = false ; \n `; code += ` _fn$ { tapIndex }( $ { this . args ({ before : tap . context ? "_context" : undefined })}). then ( _result$ { tapIndex } => { \n `; code += ` _hasResult$ { tapIndex } = true ; \n `; if ( onResult ) { code += onResult (` _result$ { tapIndex }`); } // ... break ; } return code ; } // 按照插件的注册顺序，按照顺序递归调用执行插件 callTapsSeries ({ onError , onResult , onDone , rethrowIfPossible }) { // ... const firstAsync = this . options . taps . findIndex ( t => t . type !== "sync" ); const next = i => { // ... const done = () => next ( i + 1 ); // ... return this . callTap ( i , { // ... onResult : onResult && (( result ) => { return onResult ( i , result , done , doneBreak ); }), // ... }); }; return next ( 0 ); } callTapsLooping ({ onError , onDone , rethrowIfPossible }) { const syncOnly = this . options . taps . every ( t => t . type === "sync" ); let code = "" ; if (! syncOnly ) { code += "var _looper = () => {\n" ; code += "var _loopAsync = false;\n" ; } code += "var _loop;\n" ; code += "do {\n" ; code += "_loop = false;\n" ; // ... code += this . callTapsSeries ({ // ... onResult : ( i , result , next , doneBreak ) => { // 一旦某个插件返回不为undefined, 即一只调用某个插件执行，如果为undefined,开始调用下一个 let code = "" ; code += ` if ( $ { result } !== undefined ) { \n `; code += "_loop = true;\n" ; if (! syncOnly ) code += "if(_loopAsync) _looper();\n" ; code += doneBreak ( true ); code += `} else { \n `; code += next (); code += `} \n `; return code ; }, // ... }) code += "} while(_loop);\n" ; // ... return code ; } // 并行调用插件执行 callTapsParallel ({ onError , onResult , onDone , rethrowIfPossible , onTap = ( i , run ) => run () }) { // ... // 遍历注册都所有插件，并调用 for ( let i = 0 ; i < this . options . taps . length ; i ++) { // ... code += "if(_counter <= 0) break;\n" ; code += onTap ( i , () => this . callTap ( i , { // ... onResult : onResult && (( result ) => { let code = "" ; code += "if(_counter > 0) {\n" ; code += onResult ( i , result , done , doneBreak ); code += "}\n" ; return code ; }), // ... }), done , doneBreak ); } // ... return code ; } }

在 HookCodeFactory#create中调用到 content方法，此方法将按照此钩子的执行策略，调用不同的方法来执行编译生成最终的代码。

SyncHook中调用 callTapsSeries编译生成最终执行插件的函数， callTapsSeries做的就是将插件列表中插件按照注册顺序遍历执行。

class SyncHookCodeFactory extends HookCodeFactory { content ({ onError , onResult , onDone , rethrowIfPossible }) { return this . callTapsSeries ({ onError : ( i , err ) => onError ( err ), onDone , rethrowIfPossible }); } }

SyncBailHook中当一旦某个返回值结果不为 undefined便结束执行列表中的插件。

class SyncBailHookCodeFactory extends HookCodeFactory { content ({ onError , onResult , onDone , rethrowIfPossible }) { return this . callTapsSeries ({ // ... onResult : ( i , result , next ) => ` if ( $ { result } !== undefined ) { \n$ { onResult ( result )}; \n } else { \n$ { next ()}} \n `, // ... }); } }

SyncWaterfallHook中上一个插件执行结果当作下一个插件的入参。

class SyncWaterfallHookCodeFactory extends HookCodeFactory { content ({ onError , onResult , onDone , rethrowIfPossible }) { return this . callTapsSeries ({ // ... onResult : ( i , result , next ) => { let code = "" ; code += ` if ( $ { result } !== undefined ) { \n `; code += ` $ { this . _args [ 0 ]} = $ { result }; \n `; code += `} \n `; code += next (); return code ; }, onDone : () => onResult ( this . _args [ 0 ]), }); } } AsyncParallelHook调用 callTapsParallel并行执行插件class AsyncParallelHookCodeFactory extends HookCodeFactory { content ({ onError , onDone }) { return this . callTapsParallel ({ onError : ( i , err , done , doneBreak ) => onError ( err ) + doneBreak ( true ), onDone }); } }

webpack流程篇

本文关于webpack 的流程讲解是基于webpack4的。

webpack 入口文件

从webpack项目的package.json文件中我们找到了入口执行函数，在函数中引入webpack，那么入口将会是 lib/webpack.js,而如果在shell中执行，那么将会走到 ./bin/webpack.js,我们就以 lib/webpack.js为入口开始吧！

{ "name" : "webpack" , "version" : "4.1.1" , ... "main" : "lib/webpack.js" , "web" : "lib/webpack.web.js" , "bin" : "./bin/webpack.js" , ... }

webpack入口

const webpack = ( options , callback ) => { // ... // 验证options正确性 // 预处理options options = new WebpackOptionsDefaulter (). process ( options ); // webpack4的默认配置 compiler = new Compiler ( options . context ); // 实例Compiler // ... // 若options.watch === true && callback 则开启watch线程 compiler . watch ( watchOptions , callback ); compiler . run ( callback ); return compiler ; };

webpack 的入口文件其实就实例了 Compiler并调用了 run方法开启了编译，webpack的编译都按照下面的钩子调用顺序执行：

before-run 清除缓存run 注册缓存数据钩子before-compilecompile 开始编译make 从入口分析依赖以及间接依赖模块，创建模块对象build-module 模块构建seal 构建结果封装，不可再更改after-compile 完成构建，缓存数据emit 输出到dist目录

编译&构建流程

webpack中负责构建和编译都是 Compilation。

class Compilation extends Tapable { constructor ( compiler ) { super (); this . hooks = { // hooks }; // ... this . compiler = compiler ; // ... // template this . mainTemplate = new MainTemplate ( this . outputOptions ); this . chunkTemplate = new ChunkTemplate ( this . outputOptions ); this . hotUpdateChunkTemplate = new HotUpdateChunkTemplate ( this . outputOptions ); this . runtimeTemplate = new RuntimeTemplate ( this . outputOptions , this . requestShortener ); this . moduleTemplates = { javascript : new ModuleTemplate ( this . runtimeTemplate ), webassembly : new ModuleTemplate ( this . runtimeTemplate ) }; // 构建生成的资源 this . chunks = []; this . chunkGroups = []; this . modules = []; this . additionalChunkAssets = []; this . assets = {}; this . children = []; // ... } // buildModule ( module , optional , origin , dependencies , thisCallback ) { // ... // 调用module.build方法进行编译代码，build中其实是利用acorn编译生成AST this . hooks . buildModule . call ( module ); module . build ( /**param*/ ); } // 将模块添加到列表中，并编译模块 _addModuleChain ( context , dependency , onModule , callback ) { // ... // moduleFactory.create创建模块，这里会先利用loader处理文件，然后生成模块对象 moduleFactory . create ( { contextInfo : { issuer : "" , compiler : this . compiler . name }, context : context , dependencies : [ dependency ] }, ( err , module ) => { const addModuleResult = this . addModule ( module ); module = addModuleResult . module ; onModule ( module ); dependency . module = module ; // ... // 调用buildModule编译模块 this . buildModule ( module , false , null , null , err => {}); } }); } // 添加入口模块，开始编译&构建 addEntry ( context , entry , name , callback ) { // ... this . _addModuleChain ( // 调用_addModuleChain添加模块 context , entry , module => { this . entries . push ( module ); }, // ... ); } seal ( callback ) { this . hooks . seal . call (); // ... const chunk = this . addChunk ( name ); const entrypoint = new Entrypoint ( name ); entrypoint . setRuntimeChunk ( chunk ); entrypoint . addOrigin ( null , name , preparedEntrypoint . request ); this . namedChunkGroups . set ( name , entrypoint ); this . entrypoints . set ( name , entrypoint ); this . chunkGroups . push ( entrypoint ); GraphHelpers . connectChunkGroupAndChunk ( entrypoint , chunk ); GraphHelpers . connectChunkAndModule ( chunk , module ); chunk . entryModule = module ; chunk . name = name ; // ... this . hooks . beforeHash . call (); this . createHash (); this . hooks . afterHash . call (); this . hooks . beforeModuleAssets . call (); this . createModuleAssets (); if ( this . hooks . shouldGenerateChunkAssets . call () !== false ) { this . hooks . beforeChunkAssets . call (); this . createChunkAssets (); } // ... } createHash () { // ... } // 生成 assets 资源并保存到 Compilation.assets 中给webpack写插件的时候会用到 createModuleAssets () { for ( let i = 0 ; i < this . modules . length ; i ++) { const module = this . modules [ i ]; if ( module . buildInfo . assets ) { for ( const assetName of Object . keys ( module . buildInfo . assets )) { const fileName = this . getPath ( assetName ); this . assets [ fileName ] = module . buildInfo . assets [ assetName ]; this . hooks . moduleAsset . call ( module , fileName ); } } } } createChunkAssets () { // ... } }

在webpack make钩子中, tapAsync注册了一个 DllEntryPlugin, 就是将入口模块通过调用 compilation.addEntry方法将所有的入口模块添加到编译构建队列中，开启编译流程。

compiler . hooks . make . tapAsync ( "DllEntryPlugin" , ( compilation , callback ) => { compilation . addEntry ( this . context , new DllEntryDependency ( this . entries . map (( e , idx ) => { const dep = new SingleEntryDependency ( e ); dep . loc = ` $ { this . name }: $ { idx }`; return dep ; }), this . name ), // ... ); });

随后在 addEntry 中调用 _addModuleChain开始编译。在 _addModuleChain首先会生成模块，最后构建。

class NormalModuleFactory extends Tapable { // ... create ( data , callback ) { // ... this . hooks . beforeResolve . callAsync ( { contextInfo , resolveOptions , context , request , dependencies }, ( err , result ) => { if ( err ) return callback ( err ); // Ignored if (! result ) return callback (); // factory 钩子会触发 resolver 钩子执行，而resolver钩子中会利用acorn 处理js生成AST，再利用acorn处理前，会使用loader加载文件 const factory = this . hooks . factory . call ( null ); factory ( result , ( err , module ) => { if ( err ) return callback ( err ); if ( module && this . cachePredicate ( module )) { for ( const d of dependencies ) { d . __NormalModuleFactoryCache = module ; } } callback ( null , module ); }); } ); } }

在编译完成后，调用 compilation.seal方法封闭，生成资源，这些资源保存在 compilation.assets, compilation.chunk, 在给webpack写插件的时候会用到。

class Compiler extends Tapable { constructor ( context ) { super (); this . hooks = { beforeRun : new AsyncSeriesHook ([ "compilation" ]), run : new AsyncSeriesHook ([ "compilation" ]), emit : new AsyncSeriesHook ([ "compilation" ]), afterEmit : new AsyncSeriesHook ([ "compilation" ]), compilation : new SyncHook ([ "compilation" , "params" ]), beforeCompile : new AsyncSeriesHook ([ "params" ]), compile : new SyncHook ([ "params" ]), make : new AsyncParallelHook ([ "compilation" ]), afterCompile : new AsyncSeriesHook ([ "compilation" ]), // other hooks }; // ... } run ( callback ) { const startTime = Date . now (); const onCompiled = ( err , compilation ) => { // ... this . emitAssets ( compilation , err => { if ( err ) return callback ( err ); if ( compilation . hooks . needAdditionalPass . call ()) { compilation . needAdditionalPass = true ; const stats = new Stats ( compilation ); stats . startTime = startTime ; stats . endTime = Date . now (); this . hooks . done . callAsync ( stats , err => { if ( err ) return callback ( err ); this . hooks . additionalPass . callAsync ( err => { if ( err ) return callback ( err ); this . compile ( onCompiled ); }); }); return ; } // ... }); }; this . hooks . beforeRun . callAsync ( this , err => { if ( err ) return callback ( err ); this . hooks . run . callAsync ( this , err => { if ( err ) return callback ( err ); this . readRecords ( err => { if ( err ) return callback ( err ); this . compile ( onCompiled ); }); }); }); } // 输出文件到构建目录 emitAssets ( compilation , callback ) { // ... this . hooks . emit . callAsync ( compilation , err => { if ( err ) return callback ( err ); outputPath = compilation . getPath ( this . outputPath ); this . outputFileSystem . mkdirp ( outputPath , emitFiles ); }); } newCompilationParams () { const params = { normalModuleFactory : this . createNormalModuleFactory (), contextModuleFactory : this . createContextModuleFactory (), compilationDependencies : new Set () }; return params ; } compile ( callback ) { const params = this . newCompilationParams (); this . hooks . beforeCompile . callAsync ( params , err => { if ( err ) return callback ( err ); this . hooks . compile . call ( params ); const compilation = this . newCompilation ( params ); this . hooks . make . callAsync ( compilation , err => { if ( err ) return callback ( err ); compilation . finish (); // make 钩子执行后，调用seal生成资源 compilation . seal ( err => { if ( err ) return callback ( err ); this . hooks . afterCompile . callAsync ( compilation , err => { if ( err ) return callback ( err ); // emit, 生成最终文件 return callback ( null , compilation ); }); }); }); }); } }

最后输出

在 seal执行后，便会调用 emit钩子，根据webpack config文件的output配置的path属性，将文件输出到指定的path.