Webpack5原理系列

本文通过解析Webpack构建过程中三个阶段：模块依赖拓扑图构建、产物组织形式分析、代码生成原理为读者讲解构建原理，想浅了解Webpack原理一定不要错过~

Webpack原理解析系列文章之构建依赖拓扑图原理解析，Webpack不能够直接分析文件，而是需要将文件映射到内存中才能够分析模块依赖拓扑，本文详细讲解依赖拓扑图构建过程。

Web应用代码体积会影响到应用的加载速度，Webpack提供分包能力生成多个文件。在生成文件之前，Webpack需要解决文件怎么写问题。

Code Generation即代码生成，Webpack将分析完代码组织形式之后，进入了代码转译生成阶段。

插件（Plugin）的概念插件是一种遵循一定规范的应用程序接口编写出来的程序，从而解耦系统能力，本文介绍Webpack插件机制实现原理。

浏览器能够识别的语言只有JS、CSS和HTML，但在前端生态衍生出了很多新的语言以及语言糖，如TS、Less、JSX、Vue Template，编译器无法直接解析这些语言/语法，需要有前置工具处理这些

在计算中，缓存是一个高速数据存储层，相比于直接访问源数据，缓存能够提供给用户和App更容易获取数据的途径。Webpack缓存为是一把提高构建速度的利器。本文详细介绍Webpack缓存实现。

总结起来是webpack热更新模式能够做到当应用代码发生变更、增删时，无需刷新应用，而是以模块为最小颗粒度进行模块替换或修改的能力，从而提高开发效率。

Tapable介绍 钩子类型 Tapable提供十种类型事件钩子管理方案，可以按同步和异步场景做区分： 同步场景：回调函数函数是同步执行 异步场景：回调函数是异步执行 钩子运行机制 无论是同步还是异步