大前端工程化之webpack构建流程

webpack简单来讲就是一个打包器（bundler），负责将js应用程序的所有静态资源打包输出到一个文件中，不管你使用的是何种框架或程序中使用的任何类型的资源，它都可以将他们打包成html，js，css，图片等等可以让浏览器解释执行的资源。

现如今一个js程序可以是很大的，程序开发中会引用很多的各种类型的资源，并且各个模块中会存在错综复杂的依赖，那么webpack是如何识别并分析这些依赖，然后很准确的打包成最终资源呢，我们简单说一下webpack的构建流程吧

webpack的构建流程可以看做一条流水线，在运行过程中会处理特定的任务，并且所有的构建任务都是串行的

1. 初始化构建所需参数：这些参数是配置在webpack.config.js，或者是执行时的命令行参数中，启动时首先会将这些参数合并得到最终的打包参数
2. 开始准备编译：得到上面参数后webpack会初始化一个compiler对象，加载所有配置的插件
3. 寻找入口文件：入口文件配置在配置文件中的entry属性
4. 编译模块：webpack会从入口文件逐行分析，调用对应的loader对模块进行编译，如果遇到模块有依赖其他模块，则递归的执行本步骤，直到所有的模块都编译完毕
5. 完成模块编译：经过第4步后就得到所有编译完成的模块，并生成所有模块的依赖关系图
6. 输出资源：根据入口文件和模块之间的依赖关系，组装成许多个包含多个模块的chunk，再把每个chunk转成单独的文件添加到输出列表
7. 输出完成：处理好了所有已经编译完的资源后，会根据配置中的文件输出路径和文件输出名，写入到文件系统中

 

在这个webpack构建流程中，webpack会广播很多构建中的事件，这就使得我们可以编写自己的一些插件，来实现我们自己的一些逻辑，后续再记录下如何编写一个webpack插件

有不对或不足的地方希望大家指正，一起好好学习webpack