原做者的webpack教程part3 webpack系统设计

简介

这是第三篇,也是目前为止的最后一篇了.

归纳

在这个系列的第一部分咱们学习了在webpack,和webpack的github 组织(其实就是介绍webpack各个基础库的用途,感兴趣的能够去看一下连接在这里),在第二部分,咱们介绍了Tapable,学习了一个相似于nodejs 的 EventEmitle的只有2百多行的代码的库,还知道了他掌控着webpack 的整个插件系统.

除此以外,咱们知道了webpack 如何去建立tapable 实例(继承Tapable的类),和webpack 如何去注册他们,和执行他们的功能,最后咱们学习了每个在webpack中的tapable实例的功能.

构建依赖图

在这篇文章中,咱们准备结合咱们所学到的东西和webpack如何构建依赖图的高级解释连在一块儿

依赖图是webpack中的一个关键架构,咱们相信,只要咱们知道了他是如何工做的,就能给咱们带来更远的眼界.(就是看webpack 看得更透彻了)

这里做者贴了一个youtube的连接, 是做者在一次演讲中对webpack 一次解析, 他建议配套观赏,没字幕,英文字幕都没,并且还很长有一个半小时,有兴趣的能够去看一下.

第一步,初始化(Compiler)

设置咱们已经拥有的webpack配置(所谓的编译选项), 当webpack运行的时候咱们遇到的第一个Tapable实例就是Compiler. 由于他只负责触发run, failed, done这些高级事件,因此他是一个中央调度器, 这个编译器(Compiler) 始终会返回一个Compilation, 和其余的一些重要的tapable实例,例如NormalModuleFactory, ContextModuleFactory

你能够在这里找到全部的注释

当Compiler 实例化了编译所需的插件和对象以后, 他会返回一个nwe Cpmpilation

第二步 开始编译 此处用的是 Compilation (构建依赖图)

在Compilation 以后 (第二个Tapable实例)

咱们把你应用的依赖图描述成为Compilation, 就好像把一我的描述成一个对象同样,咱们必需要在某处有一个跟节点,而后分支出其余的节点

咱们正在描述的就是你的配置的入口属性,

即便咱们提供了入口点路径,webpack 仍是须要确认那个路径存不存在,下面咱们将会开启一组递归操做

Resolve(Resolve 实例)

任什么时候候均可以提供一个原请求(模块的路径),在这个例子中,就是入口点,webpack会首先发送这些路径信息给Resolve实例去解析获得入口文件.Resolve 实例会用 加强的nodejs 正则模版去肯定该路径是否存在该模块,而后返回一个关于Resolve 模块的额外的信息, 这个信息包含文件系通通计信息,绝对路径,和Resolve模块的惟一ID标识

• 建立模块 : 而后Resolve 会 在原信息在内存中或者缓存中被捕获的时候. 发送 resolve 模块信息到NormalMouduleFactory.
• Parse 模块: 模块工厂会指定Parser 实例到每个工厂建立的NormalModule,在模块源存储以后,Parser会分析这个模块,此外,他还会经过被称做loaders(loader 概念不懂得能够查看官方文档)一系列的转换去发送Module,一个loader链在最后都会返回一个JavaScript代码,所以,Parser如今能够开始解析源码而且声称AST(抽象语法树)了
• 寻找依赖, 如今咱们在AST上有了模块的信息,咱们能够为特定类型的语句和表达式遍历AST了,咱们要寻找的是咱们定义的依赖说明,所以,当Parse遍历AST 而且赶上require(foo)这样的信息的时候,那么这个信息就会存储到Dependeny实例,而且把他跟原来的模块关联起来(链表的概念)

• 重复执行: 一旦模块的全部的依赖都被找到了,咱们须要处理他们,这就是递归发生的地方(前面的连接),每个模块都要执行上面的操做来找到他们依赖的模块.

译者注: webpack 大概的流程说得挺清楚明白的,就下来就是要看各位骚操做的时候了