webpack 的打包流程

1.webpack 的打包流程

从以上5个方面来分析Webpack的打包流程：

1. 初始化参数：这一步会从我们配置的webpack.config.js中读取到对应的配置参数和shell命令中传入的参数进行合并得到最终打包配置参数。

2. 开始编译：这一步我们会通过调用webpack()方法返回一个compiler 方法，创建我们的compiler对象，并且注册各个Webpack Plugin。找到配置入口中的entry代码，调用compiler.run()方法进行编译。

3. 模块编译：从入口模块进行分析，调用匹配文件的loaders对文件进行处理。同时分析模块依赖的模块，递归进行模块编译工作。

4. 完成编译：在递归完成后，每个引用模块通过loaders处理完成同时得到模块之间的相互依赖关系。

5. 输出文件：整理模块依赖关系，同时将处理后的文件输出到output的磁盘目录中。

2.webpack的事件流机制

webpack是基于事件流的插件集合，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。

Tapable包本质上是为我们更方便创建自定义事件和触发自定义事件的库，类似于Node.js的EventEmitter Api，主要是控制钩子函数的发布与订阅，控制着webpack的插件系统。Webpack中最核心的负责编译的Compiler和负责创建的捆绑包的Compilation都是Tapable实例。

3.babel的工作流程

在日常前端项目中，绝大多数时候我们使用babel进行js代码的转化，它的工作流程大概可以概括称为以下三个方面：

1. Parse（解析）阶段：这个阶段将我们的js代码(字符串)进行词法分析生成一系列tokens，之后再进行语法分析将tokens组合称为一颗AST抽象语法树。(比如babel-parser它的作用就是这一步)

2. Transform（转化）阶段：这个阶段babel通过对于这棵树的遍历，从而对于旧的AST进行增删改查，将新的js语法节点转化称为浏览器兼容的语法节点。(babel/traverse就是在这一步进行遍历这棵树)

3. Generator（生成）阶段：这个阶段babel会将新的AST转化同样进行深度遍历从而生成新的代码。(@babel/generator)

前端的webpack如何进行打包的？
「前端基建」带你在Babel的世界中畅游