当前位置: 首页 > Web前端 > JavaScript

webpack流程分析(四):开始构建

时间:2023-03-27 10:33:57 JavaScript

前言准备工作做了三遍,现在,马上,马上,我们进入构建流程分析!构建入口的过程还是在compiler.compiler函数中,//在此之前,会创建一个新的编译对象。this.hooks.make.callAsync(compilation,err=>{logger.timeEnd("makehook");if(err)returncallback(err);logger.time("finishmakehook");this.hooks.finishMake.callAsync(compilation,err=>{logger.timeEnd("finishmakehook");if(err)returncallback(err);process.nextTick(()=>{logger.time("finishcompilation");compilation.finish(err=>{logger.timeEnd("finishcompilation");if(err)returncallback(err);logger.time("sealcompilation");compilation.seal(err=>{//dosomething});});});});});这样就触发了makehook注册的回调,还记得我在初始化部分提到的EntryPlugin吗?这里注册了一个hook回调,触发compilation.addEntrycompilation.addEntry(context,dependency,name,callback);//依赖是EntryDependency实例addEntryaddEntry做了几件事:生成EntryData并调用编译钩子addEntry执行compilation.addModuleaddModuleaddModule根据dep获取对应的moduleFactory,然后执行handleModuleCreation,将moduleFactory和依赖数据塞入一个队列factorizeQueue得到moduleFactoryconstDep=/**@type{DepConstructor}*/(dependency.constructor);constmoduleFactory=this.dependencyFactory.get(Dep);this.dependencyFactories是一个Map,那么他什么时候设置的呢?答案还是在初始化部分提到的EntryPlugin中。**塞入队列获取依赖和模块的编译方法后,塞入factorizeQueue队列this.factorizeModule({currentProfile,factory,dependencies,factoryResult:true,originModule,contextInfo,context},()=>{//dosomethine})//typescript的解决方法,因为它不支持classCompilation.prototype.factorizeModule=/**@type{{(options:FactorizeModuleOptions&{factoryResult?:false},callback:ModuleCallback)中的函数重载:空白;(选项:FactorizeModuleOptions&{factoryResult:true},回调:ModuleFactoryResultCallback):void;}}*/(function(options,callback){this.factorizeQueue.add(options,callback);});线索,添加后,整个编译过程中没有找到类似factorizeQueue.start,factorizeQueue.run的代码。我们来看看factorizeQueue内部做了什么factorizeQueuethis.factorizeQueue=newAsyncQueue({name:"factorize",parent:this.addModuleQueue,processor:this._factorizeModule.bind(this)});factorizeQueue是AsyncQueue的一个实例。AsyncQueue主要是做一个队列控制。队列长度根据外部传入的并行度来控制,不传入factorizeQueue,这里默认为1。如果条件正常,_processorthis._processor(entry.item,(e,r)=>{inCallback=true;this._handleResult(entry,e,r);})将在AsyncQueue内部被调用;这里调用的是_factorize模块,然后执行factory.create,开始reslove!总结到这里我们就了解了webpack是如何通过配置中的entry属性来获取modulefactory的。下一篇文章将介绍reslove过程。