前端构建工具webpack(原理篇)

目的:了解输入打包命令后发生了什么事情

本质:Node去运行一个js文件,这个js文件做的事情就是铺垫好流程,接着启动打包流程。

首先我们先来了解一下这个js文件到底有什么东西,再来引出概念。

我把这个文件形容为一个车间,那么车间最重要的是什么呢,最重要的是要有机床。
这个机床在webpack构建中称之为Compiler。它是一个编译类。

那么这个机床要需要启动的话要先准备什么,需要先输入它该怎么运行的参数。
这个参数就是我们编写的webpack.config.js配置文件。也还需要其他shell配置。

输入完参数,接着我们需要在机床上安装一些机械手去控制零件变化,这些机械手就是它的插件。称为Plugin

加载完插件后,机床(编译器Compiler)就可以开始工作了。

这个在webpack整个核心的打包核心阶段称之为初始化阶段

1.创建编译器对象(new Compiler());
2.初始化参数(options);
3.初始化编译环境(加载插件Plugin);**
4.开始编译(compilere.run);**

那这个编译器怎么工作的。

首先这个车床它之前已经准备好了参数和设备,那么现在就该有某个东西推着这些零件往前走,这个东西就是滚动带。在webpack里面叫Compilation。它代表了单次构建过程。由它来推动着打包过程。

它是如何推动这个过程呢?

首先我们需要确定好入口处在哪里,然后从这里开始加载,目标就是生成一个入口模块对象。

在生成模块过程中需要将有些零件转换成可加工的形式,由于在webpack只能识别js文件,所以我们在构建过程中把其他资源文件例如css,sass,png等格式的文件进行处理转换成可加工的形式。这个过程需要用到的就是Loader(加载器)。Loader能将这些资源文件进行处理解析,成为可被进行处理的形式。这些加载器是从哪里来的呢,就是我们在一开始初始化参数时定义的。Compilation会从编译器那边拿到这些loader的信息进行处理最后将模块转义成标准的js内容。

接着这些零件可以处理了,但是杂乱无章的零件让机器不好处理,我们需要将这些零件都联系到一起。(即找到它们所有的依赖关系)但想要找到这个零件需要用到哪个零件进行组件都不知道从哪看起。这时我们就需要先让零件序列化,能按图索骥的去操作它。用到了babel/paser将它们解析成AST对象

稍微解释一下AST,它叫做抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示。简而言之,它可以表示源代码中的每一个结构。
例如:image.png

有了Ast对象,现在就可以获取这个模块对应的依赖。

怎么获取这个模块对应的依赖呢?

babel/traverse这个工具可以通过import/require语句来进行判断。这时找到入口文件所需要的依赖之后注入到依赖数组中,生成一个含有文件名,ast对象,依赖数组的入口模块。
接着在重复上述步骤递归去找到入口模块下的依赖对应的依赖。这时将所有的零件都联系起来。

展开说一下找寻依赖关系的步骤,假如入口文件的依赖关系如下:
image.png

经过加工后形成入口模块流程如下:
image.png

这时compliation会依次去遍历这两个依赖文件,生成对应的模板:
image.png

由于a.js文件下仍有依赖文件,所以compliation会继续遍历,直到没有新的依赖为止:
image.png

这个阶段在webpack整个核心的打包核心阶段称之为构建阶段
1.编译模块(make);loader解析,生成ast对象,构建入口模块
2.完成模块编译;找到入口模块下的所有依赖关系,生成不同模块。

此时我们把一个个零件加工好了,也把它们之间的关系标明了,最后就是要将它们包装起来。这时需要用的包装纸包装成小成品,在webpack里面叫做chunk。按照一定的规则分成一个个chunk,一个chunk可以包含一个模块或者多个模块。将一个个chunk添加到输出列表中去。最后调用node的文件流(fs),根据配置好的出口路径和文件名,把文件写到文件系统中去生成一个js打包文件。

这个阶段在webpack整个核心的打包核心阶段称之为生成阶段

1.输入资源(seal);根据依赖关系生成一个个chunk,添加到输出列表。
2.写入文件系统;根据配置出口路径和文件名,进行写入。

整体的文件形态流转:

image.png

总结

webpack基本的构建流程大体上如上述所示,但是还有涉及的很多细节无法进行逐一展开,但理解了大概的流程会对webpack有一个新的认识,它之所强大是因为这条流程基本是不变的,而且拓展性强,它利用loader,plugin插件来不断壮大它的生态,成为了前端一个不那么容易被替代的构建工具。

如其所是

7 声望
0 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45.2k评论 18

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.2k评论 9

从零搭建 Node.js 企业级 Web 服务器(五):数据库访问
回顾 从零搭建 Node.js 企业级 Web 服务器(一):接口与分层,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,控制层与服务层实现了业务处理过程,模型层定义了业务实体并以 对象-关系...

乌柏木34阅读 4.6k评论 9

从零搭建 Node.js 企业级 Web 服务器(十三):断点调试与性能分析
Node.js 官方提供了断点调试机制,出于安全性考虑默认为关闭状态,可以通过 node 参数 --inspect 或 --inspect-brk 开启,配合 IDE 能够非常方便地调试代码,本章就上一章已完成的项目 licg9999/nodejs-server-ex...

乌柏木31阅读 3.9k评论 9

如其所是

7 声望
0 粉丝
宣传栏