对于webpack的认识，项目中用到vue的前端工程师对vue-cli脚手架应该都不陌生，不得不说脚手架既方便而且很好用，修改起来也很方便，有使用经验的都知道webpack里面各个配置项的功能，打包的时候只需要一句npm run build就可以完成打包工作了，可是webpack我们还不知道打包的过程中发生了什么，它是如何去运作的，打包的时候报错，也只是通过goole，baidu来帮忙解决问题，搜索出来后至于为什么要这样修改，什么原理，很少人会去纠结，不管，能解决就好的心态。所以，了解原理也是很有必要的，对于换工作的小伙伴面试的时候有好处。
概念
每个开发工具都会有自己的运行原理，webpack首先得明白几个概念。
- Enrty: 入口，webpack构建的起始点。
- Module: 模块，webpack里面一切皆是模块，也是代表着文件，从Enrty配置的入口开始，递归找出依赖的模块。
- Chunk: 代码块，找出递归依赖模块经转换后组合成代码块。
- Loader: 模块转换器，也就是将模块的内容按照需求转换成新内容。
- Plugin: 扩展插件，webpack构建过程中，会在特定的时机广播对应的时间，而插件可以监听这些事件的发生。
流程
webpack构建流程，详细过程如下:
- 初始化: 从配置文件或者是shell（一个梳理梳理代码逻辑的模块），得到最终参数，实例化插件new Plugin()
- 开始编译: 通过初始化得到了最终参数，实例化一个Compiler对象，加载插件（依次调用插件中的apply方法），通过执行Compiler.run开始编译。
- 确定入口: 根据配置中Entry找到所有入口文件（一般情况下只设置一个）
- 编译模块: 从Entry出发，调用配置的loader，对模块进行转发，同时找出模块依赖的模块（下文有解释怎么找），一次递归，直到所有依赖模块找到完成本步骤处理。
- 完成模块编译: 现在已经完成了模块的编译，使用loader对所有模块进行了转换，得到了转换后的新内容以及依赖关系。
- 输出资源: 根据与模块之间的依赖关系，组装成一个个chunk代码块，并且生成文件输出列表。
- 输出成功: 根据配置中的输出路径和文件名，将文件写入文件系统，完成构建。
事件
整个构建打包的过程会发生很多事件，来供Plugin监听，这些事件具体看可以分为三个阶段，分别是初始化阶段、编译阶段、输出阶段，具体介绍下表：
初始化阶段
| 事件 | 作用 |
|---|---|
| 初始化 | 从配置文件或者是shell（一个梳理梳理代码逻辑的模块），得到最终参数，实例化插件new Plugin() |
| 实例化Compiler | 通过初始化得到了最终参数，实例化一个Compiler对象，加载插件（依次调用插件中的apply方法），通过执行Compiler.run开始编译 |
| 加载插件 | 依次调用插件中的apply方法，同时也会将Compiler对象实例传入，就可以调用Webpack提供的API,compiler实例可以说是Webpack实例 |
| environment | 将node.js风格的文件系统应用到compiler对象，便可以直接通过compiler来对文件进行操作 |
| entry-option | 读取配置中的Entry，依次实例化出对应EntryPlugin，为后面该Entry的递归解析工作做准备 |
| after-plugins | 调完所有内置和配置的插件的apply方法 |
| after-resolvers | 根据配置初始化resolvers，resolvers负责在文件系统中寻找指定路径的文件 |