内容简介：对于webpack的认识始终停留在对脚手架的使用，不得不说脚手架既方便又好用，修改起来也方便，只需要知道webpack中各个配置项的功能，于是对于我们来说，webpack始终就是一个黑盒子，我们完全不清楚里面是如何去运作的。打包时报错，就只能借助google来协助帮忙解决问题，至于为什么要这样解决，什么原理，不管，能解决就好。那么，了解一下基本原理也是有必要。言归正传，我们一起了解一下webpack运行基本原理，首先先明白几个核心概念，webpack构建流程，详细过程如下：
对于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是串行流水线运行的，工作期间会有很多广播事件，来供插件使用，这里我们介绍了各个阶段的事件以及作用，具体代码表示形式，后续文章会引入。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
