webpack是一个插件架构,所有功能都以插件的形式集成在构建流程中,并通过发布订阅事件来触发各个插件的执行。
核心类是Tapable,用它来实现插件的实例化及挂载。
optimist是node的工具库,根据webpack.config.js及shell options生成option,options包含构建需要的重要信息;(entry-options)
webpack创建compiler实例,如果options是数组,则创建多个compiler(compiler包含compiler与watching两个对象),
初始化compiler,为compiler添加上下文context和options,初始化基本插件,把options对应的选项进行require;
compiler调用run,run内调用compile方法,开始编译;(make)
compiler内创建compilation对象,并将this传入,compilation就包含了对compiler的引用;
compiler调用addEntry,addEntry调用_addModuleChain();
_addModuleChain查询合适的工厂函数创建模板,并将其加入module链当中,调用buildModule(),对模块进行build(build-module);
buildModule是核心,包括**module.js内调用的build(),build调用doBuild来查找合适的loader,并在回调函数内解析源文件,生成AST,来记录源码间的依赖行为,创建depedency加入依赖数组(期间调用addModuleDepedencies);
module创建完毕;
compilation调用seal(after-compile),添加hash,调用addModule、addChunk(将module装入chunk)对chunk和module开始封装、合并、抽取公共模块,生成编译后的源码
compilation调用createChunkAsset,开始生成最终代码;
createChunkAsset内根据不同的module,调用MainModule.render,chunkTemplate.render进行进一步处理
MainModule.render,chunkTemplate.render内调用moduleTemplate.render
最终生成_webpack_require格式。
moduleTemplate.render调用module.source
module.source将生成好的代码放入compilation.assets中
Compiler.emitAssets将compilation的assets输出到目录中
webpack的template有四种子类
MainTemplate.js 生成项目入口文件
ChunkTemplate.js 异步加载的js
ModuleTemplate.js 对所有模块的一个代码生成
HotUpdateChunkTemplate.js 对热替换的处理
依赖(dependency)
每一个module都有dependencies字段,这是它的依赖数组,而每一个依赖对象都有一个module字段,指向被依赖的module,这样module就能找到它依赖的那些module。dependency有许多子类,如AMDRequireDependency、CommonJsRequireDependency、SystemImportDependency等,分别对应AMD、commonJs、es6等的加载规范。