webpack原理，使用，优化

1 webpack的原理

1. 原理

webpack整体是一个事件驱动架构，所有的功能都以Plugin(插件)的方式集成在构建流程中， 通过发布订阅事件来触发各个插件执行。webpack核心使用tapable来实现Plugin(插件)的注册和调用,Tapable是一个事件发布(tap)订阅(call)库。

2. webpack的流程

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
4. 完成模块编译：在经过第3步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
5. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

3. webpack的优化

webpack是我们在日常开发中使用的构建工具，它的打包速度直接影响开发效率，因此优化webpack的打包是很重要的，下面使用我们的一个比较大型的项目来做实验。

上图是采用常规webpack配置，并未采用优化手段打包，打包时间100s…

采用webpack4.0提供的优化手段：<