目标：理解输出打包命令后产生了什么事件

实质：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插件来一直壮大它的生态，成为了前端一个不那么容易被代替的构建工具。