webpack打包

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等的加载规范。