webpack尽管应用简略，然而它对于使用者就是一个黑盒。
鲁迅说：如果你对一个事物原理不理解，那么你不可能纯熟驾驭它。
如果有不相熟webpack根本应用的小伙伴们，能够查看我之前的分享，能够狠狠的点击这里：https://segmentfault.com/a/11...
一. 流程概览
- 校验options参数是否非法，options参数和命令行中的参数合并
- 实例化Compiler对象，初始化所有配置插件 （compiler类继承自Tapable），挂载hooks。
- 顺次调用plugin的 apply 办法，让插件能够监听后续的所有事件节点。
- 执行compiler.run办法，此办法实际上实例化Tapable中的AsyncSeriesHook(['compiler'])
- 找到主入口，入口可能会有多个，这个取决config文件是否配置多个entry
- 创立compilation对象，执行对应的回调。 包含： 进入每一个entry -> 应用loader进行编译 -> acorn解析AST -> 递归执行所有文件 -> 全副执行实现后执行compilation seal办法，对每个chunk进行整顿，优化，封装。
- Tapable播送emit事件，所有文件编译实现并且输入，这个时候还在内存中，能够获取所有文件信息和chunk的各种信息
- 文件写入磁盘实现，Tapable播送afterEmit事件
- 实现 编译，Tapable播送Done事件
二. Tapable
咱们能够把webpack了解为一条生产线，须要通过一系列解决流程后能力将源文件转换成输入后果。这条生产线上的每个解决流程的职责都是繁多的，多个流程之间会存在依赖关系，只有实现以后解决后能力交给下一个流程去解决。
咱们的插件就像一个插入到生产线中的一个性能，在特定的机会对生产线上的资源会做解决。webpack它是通过 Tapable来组织这条简单的生产线的。
webpack在运行的过程中会播送事件，插件只须要关怀监听它的事件，就能退出到这条生产线中。而后会执行相干的操作。webpack的事件流机制它能保障了插件的有序性，使整个零碎的扩展性好。事件流机制应用了观察者模式来实现的。
总的来说，tapable裸露了3种hooks：
- tap （同步钩子）
- tapAsync （异步钩子）
- tapPromise（异步promise钩子）
罕用事件流如下：
| 事件名称 | 阐明 |
|---|---|
| entryOption | 初始化options |
| run | 开始编译 |
| make | 从entry开始，递归剖析依赖，并对依赖进行build |
| build-module | 应用loader加载文件，并build模块 |
| normal-module-loader | 对loader的文件进行acorn编译，生成形象语法树AST |
| program | 开始对AST进行遍历，当遇到require时触发call require事件 |
| seal | 所有依赖build实现，开始对chunk进行优化（抽取公共模块、加hash等） |
| optimize-chunk-assets | 压缩代码 |
| emit | 把各个chunk输入到后果文件 |
三. compiler
compiler对象 是Compiler类的实例对象， 而Compiler类继承自Tapable，webpack在启动时，会实例化一次compiler，后续每次文件的改变，都会创立一个compilation对象。
Compiler 负责文件监听和启动编译。Compiler 实例中蕴含了残缺的 Webpack 配置，全局只有一个 Compiler 实例
compiler对象，大抵数据结构如下：
咱们在开发自定义插件时，webpack会调用插件类的apply办法，传入compiler，咱们就能够在tapable播送事件流时，自定义做一些事件啦~
把握webpack的工作原理，对咱们后续开发本人的loader, plugin有极大的益处。
前面我将分享，如何开发本人的plugin。
码字不易，多多关注~????