目的：了解打包命令输入后发生了什么。本质：Node运行一个js文件。这个js文件的作用就是为流程做铺垫，然后开始打包流程。首先我们先了解一下这个js文件里有什么，然后介绍一下概念。我把这个文档描述成一个工作坊，那么一个工作坊最重要的是什么？最重要的是要有机床。这个机器工具在webpack构建中被称为Compiler。它是一个编译类。所以如果要启动这台机床，首先要准备什么，首先要输入它应该如何运行的参数。这个参数就是我们写的webpack.config.js配置文件。还需要额外的外壳配置。输入参数后，我们需要在机床上安装一些机械手来控制零件的更换。这些操纵器就是它的插件。称为插件。插件加载完成后，机床（Compiler）就可以开始工作了。整个webpack核心中的这个打包核心阶段，我们称之为初始化阶段。即，1.创建一个编译器对象(newCompiler())；2.初始化参数（options）；3.初始化编译环境（加载插件Plugin）；**4.开始编译（compilere.run）；**那么这个编译器是如何工作的。首先，这台车床的参数和设备，之前都已经准备好了，那么现在应该是有什么东西在推动这些零件往前走，这个东西就是滚带。在webpack中称为Compilation。它代表一个构建过程。它驱动包装过程。它是如何驱动这个过程的？首先我们要确定入口在哪里，然后从这里开始加载。目标是生成一个入口模块对象。在生成模块的过程中，需要将一些零件转换成可加工的形式。由于webpack只能识别js文件，我们在构建过程中对其他资源文件如css、sass、png等格式进行处理转换成可加工文件。处理后的形式。这个过程需要用到加载器（loader）。Loader可以将这些资源文件处理解析成可以处理的形式。这些装载机从何而来？我们在初始化参数时定义了它们。编译会从编译器中获取加载器信息进行处理，最终将模块转换成标准的js内容。然后就可以加工零件了，但是零件比较杂乱，机器不好处理，我们需要把这些零件连接起来。（也就是找到他们所有的依赖关系）但是如果你要找到这个部分，你不知道你需要用哪个部分来组装。这时候我们就需要先把部件序列化，这样我们就可以按照图来操作了。Babel/paser用于将它们解析为AST对象。稍微解释一下AST，它叫做抽象语法树（abstractsyntaxcode，AST）是源代码的抽象语法结构的树状表示。简而言之，它可以表示源代码中的每一个结构。例如：有了Ast对象，你现在就可以获取到这个模块对应的依赖了。如何获取这个模块对应的依赖？babel/traverse工具可以通过import/require语句来判断。此时入口文件需要的依赖被找到并注入到依赖数组中，生成包含文件名、ast对象、依赖数组的入口模块。然后递归重复以上步骤，找到入口模块下的依赖对应的依赖。现在连接所有部件。展开说说寻找依赖关系的步骤。如果入口文件的依赖关系如下：经过处理，形成入口模块的过程如下：此时compliation会依次遍历两个依赖文件，生成对应的模板：因为a.jsfile中还有依赖文件，所以compliation会继续遍历，直到没有新的依赖：这个阶段在整个webpack核心的打包核心阶段中称为构建阶段。1.编译模块（make）；解析加载器，生成AST对象，构建入口模块。2.完成模块编译；找到入口模块下的所有依赖，生成不同的模块。至此，我们已经把各个部分都处理好了，并且标注了它们之间的关系，最后就要打包了。这个时候需要用到的包装纸就被打包成一个小的成品，在webpack中叫做chunk。它按照一定的规则划分成chunk，一个chunk可以包含一个模块，也可以包含多个模块。将每个块添加到输出列表。最后调用node的文件流（fs），根据配置的导出路径和文件名，将文件写入文件系统生成js包文件。这个阶段在整个webpack核心的打包核心阶段被称为生成阶段。即，1.输入资源（印章）；根据依赖关系一个一个生成chunk，添加到输出列表中。2.写入文件系统；按照配置的导出路径和文件名写入。整体文件形式流程：总结webpack的基本构建流程大体如上图，但是涉及到的细节还是很多无法一一展开，但是了解了大概的流程会给webpack一个新的认识，而它的强大之处在于是因为这个过程基本不变，可扩展性强。它使用loader和plugin插件不断扩大自己的生态，已经成为一个不太容易被取代的前端构建工具。
