共计 1908 个字符,预计需要花费 5 分钟才能阅读完成。
目标:理解输出打包命令后产生了什么事件
实质: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)是源代码的形象语法结构的树状示意。简而言之,它能够示意源代码中的每一个构造。
例如:
有了 Ast 对象,当初就能够获取这个模块对应的依赖。
怎么获取这个模块对应的依赖呢?
babel/traverse 这个工具能够通过 import/require 语句来进行判断。这时找到入口文件所须要的依赖之后注入到依赖数组中,生成一个含有文件名,ast 对象,依赖数组的入口模块。
接着在反复上述步骤 递归 去找到入口模块下的依赖对应的依赖。这时将所有的整机都分割起来。
开展说一下找寻依赖关系的步骤,如果入口文件的依赖关系如下:
通过加工后造成入口模块流程如下:
这时 compliation 会顺次去遍历这两个依赖文件,生成对应的模板:
因为 a.js 文件下仍有依赖文件,所以 compliation 会持续遍历,直到没有新的依赖为止:
这个阶段在 webpack 整个外围的打包外围阶段称之为 构建阶段。
1. 编译模块(make);loader 解析,生成 ast 对象,构建入口模块。
2. 实现模块编译;找到入口模块下的所有依赖关系,生成不同模块。
此时咱们把一个个整机加工好了,也把它们之间的关系表明了,最初就是要将它们包装起来。这时须要用的包装纸,在 webpack 外面叫做 chunk。依照肯定的规定分成一个个 chunk,一个 chunk 能够蕴含一个模块或者多个模块。将一个个 chunk 增加到输入列表中去。最初调用 node 的文件流(fs),依据配置好的进口门路和文件名,把文件写到文件系统中去生成一个 js 打包文件。
这个阶段在 webpack 整个外围的打包外围阶段称之为 生成阶段 。
即
1. 输出资源(seal);依据依赖关系生成一个个 chunk, 增加到输入列表。
2. 写入文件系统;依据配置进口门路和文件名,进行写入。
整体的文件状态流转:
总结
webpack 根本的构建流程大体上如上述所示,然而还有波及的很多细节无奈进行逐个开展,但了解了大略的流程会对 webpack 有一个新的意识,它之所弱小是因为这条流程根本是不变的,而且拓展性强,它利用 loader,plugin 插件来一直壮大它的生态,成为了前端一个不那么容易被代替的构建工具。