原作者的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 大概的流程说得挺清楚明白的,就下来就是要看各位骚操作的时候了


又一个辣鸡前端
没什么简介,本人比较浮躁,希望能通过写作静下心来。
375 声望
277 粉丝
0 条评论
推荐阅读
浅谈Vue3的watchEffect用途
vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项。他可以实现在一个属性变更的时候,去执行我们想要的行为。比如:

有趣的李28阅读 41.6k评论 4

耗时一年半才出第一版,这个工具会一统前端么?
大家好,我卡颂。前端领域从不缺少热点,基本每过半年,就会出现新的工具。在这样快节奏的浪潮中,有个工具却显得格格不入,他就是Rome。从名字中我们就能窥探出一丝端倪,看看别的工具:vite(法语中快的的意思...

卡颂3阅读 1.2k评论 1

封面图
Turbopack 发布后的各方反应:Vite/Webpack/围观群众
上周整理了一下 Turbopack 发布后的各方反应,以便让自己和各位同学下一步做决策的时候能有所参考。接着忙碌的一周过去,我发现博客这周还没更,于是赶紧来补一下。

Meathill6阅读 816评论 1

封面图
极致编译速度,一文搞定webpack5升级
本文作者:xiongxiao01在尝试升级 webpack5 之前,建议大家尽量先把官方文档通读一遍,可以少走很多弯路,本文是在结合具体业务场景后,对官方文档的归纳和补充。

云音乐技术团队4阅读 682

封面图
想弄懂Babel?你必须得先弄清楚这几个包
相信很多人都知道Babel,知道它是用来编译ES6+的东西。但是再深入一点,大家都清楚我们平时项目中Babel用到的那些包作用是什么吗?为什么要用那几个包?

limingcan1阅读 534

封面图
前端脚手架开发入门
脚手架是一个通用开发工具,之前自己写一下原生web工程时总是需要重复搭建开发环境、重复写几乎相同的配置文件。为了避免每次的重复工作,统一开发环境、规范,于是想到自己写一个脚手架用用,顺便记录一下。

coderLeo1阅读 425

封面图
前端微服务跨域配置解决办法,devServer为例
前言Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能DevServer配置解决跨域子应用静态资源跨域...

smallStone1阅读 990评论 4

375 声望
277 粉丝
宣传栏