Webpack学习－工做原理（上）

• 原文地址：http://wushaobin.top/2019/02/12/webpackPrinciple/

对于webpack的认识始终停留在对脚手架的使用，不得不说脚手架既方便又好用，修改起来也方便，只须要知道webpack中各个配置项的功能，因而对于咱们来讲，webpack始终就是一个黑盒子，咱们彻底不清楚里面是如何去运做的。打包时报错，就只能借助google来协助帮忙解决问题，至于为何要这样解决，什么原理，无论，能解决就好。那么，了解一下基本原理也是有必要。

概念

言归正传，咱们一块儿了解一下webpack运行基本原理，首先先明白几个核心概念，

• Entry：入口，webpack构建的起始
• Module：模块，webpack里面一切皆模块，也是表明着文件，从Entry配置的入口文件开始，递归找出依赖的模块
• Chunk：代码块，找出递归依赖模块经转换后组合成代码块
• Loader：模块转换器，也就是将模块的内容按照需求装换成新内容
• Plugin：扩展插件，webpack构建过程当中，会在特定的时机广播对应的事件，而插件能够监听这些事件的发生

流程

webpack构建流程，详细过程以下：

• 初始化：从配置文件或是shell读取与合并参数，获得最终参数，实例化插件new Plugin()
• 开始编译：经过上一步初始化获得的最终参数，初始化一个Compiler对象，加载插件（依次调用插件中的apply方法），经过执行Compiler.run开始编译
• 肯定入口：根据配置中entry找出全部入口文件
• 编译模块：从entry出发，调用配置的loader，对模块进行转换，同时找出模块依赖的模块（如何找？见下文），依次递归，直到全部依赖模块完成本步骤处理
• 完成模块编译：这一步已经使用loader对全部模块进行了转换，获得了转换后的新内容以及依赖关系
• 输出资源： 根据入口与模块之间的依赖关系，组装成一个个chunk代码块，而且生成文件输出列表
• 输出成功：根据配置中的输出路径和文件名，将文件写入文件系统，完成构建

事件

整个构建流程会发生不少的事件，来供Plugin监听，这些事件具体的能够分为三个阶段，分别是初始化阶段、编译阶段、输出阶段，那么具体有哪些事件，这里按阶段分别介绍，

初始化阶段

事件	做用
初始化	从配置文件或是shell读取与合并参数，获得最终参数，依次实例化插件new Plugin()
实例化Compiler	经过上一步初始化获得的最终参数，初始化一个Compiler对象，负责监听文件和启动编译，全局只有一个Compiler对象
加载插件	依次调用插件中的apply方法，同时也会将Compiler实例传入，就能够调用Webpack提供的api，Compiler实例能够说是就是Webpack的实例
environment	将node.js风格的文件系统应用到compiler对象，即可以直接经过compiler来对文件进行操做
entry-option	读取配置中的entry，依次实例化出对应EntryPlugin，为后面该entry的递归解析工做作准备
after-plugins	调完全部内置和配置的插件的apply方法
after-resolvers	根据配置初始化resolvers，resolvers负责在文件系统中寻找制定路径的文件

编译阶段

事件	做用
run	启动一次新的编译，调用Compiler.run()
watch-run	和run相似，区别在于它是在监听模式下进行编译的，这个事件能够获取哪些文件发生了变化从而致使新的一次编译
compile	告诉插件新的一次编译即将启动，而且给插件带上compiler对象
compilation	每当检测到文件的变化，都会有一次新的compilation被建立，一个compilation对象包含了当前的模块资源、编译生成的资源、变化的文件等等的属性和方法，同时记住，在不少事件的的回调中都会将compilation传入，以便使用
make	一个新的Compilation建立完毕，那么就会从entry配置中开始读取文件，使用配置好的loader对文件进行编译，编译完后再找出文件依赖的文件，递归地去编译和解析
after-compile	一次Compilation执行完成
invalid	文件编译错误等异常触发该事件,不会致使webpack退出

Compilation的事件

事件	做用
build－moudle	使用对应的loader去转换一个模块
normal－module－loader	在用loader转换一个模块后，会使用acorn解析转换后的内容输出对应的抽象语法树（ast）,以便webpack后面分析代码使用
program	从配置的入口开始，分析生成的ast，遇到require等导入语句时，便会将其加入依赖模块列表，而且对找出的依赖进行递归分析，最终能够弄清全部依赖关系
seal	全部模块及其依赖的模块都经过Loader转换完成，根据依赖关系生成chunk

输出阶段

事件	做用
should－emit	全部须要输出的文件都生成，准备输出，询问哪些文件须要输出，哪些不须要输出
emit	肯定好要输出哪些文件后，并执行文件输出，能够在这里获取和修改输出的内容
after－emit	文件输出完毕
done	完成一次完整的编译和输出流程
failed	编译和输出过程当中运到异常，致使webpack退出，会直接到这个步骤，能够在这里获取具体缘由

总结

Webpack是很好的前端资源加载和打包工具，在webpack里一切皆模块，很好地处理文件之间的依赖关系，这里咱们介绍的是些理论性的知识，了解基本概念，知道整个流程是怎么样的，webpack是串行流水线运行的，工做期间会有不少广播事件，来供插件使用，这里咱们介绍了各个阶段的事件以及做用，具体代码表示形式，后续文章会引入。