首先我们应该简单了解一下 webpack 的整个打包流程
- 读取 webpack 参数配置
- 启动 webpack ,创建 Compiler 对象并开始解析项目
- 从入口文件 entry 开始解析,并找到其导入的模块,递归遍历分析,形成依赖树
- 对不同的文件类型的依赖模块文件使用对应的
Loader
进行编译,最终转为JavaScript
文件 - 整个过程中
webpack
会通过发布订阅模式, 向外抛出一些hooks
, 而 webpack 插件即可通过监听这些关键的事件节点,执行插件任务进而达到干预输出结果的目的。
其中文件的解析与构建是一个比较复杂的过程,在webpack源码中主要依赖于compiler和compilation两个核心对象实现。
compiler
对象是一个全局单例,他负责把控整个webpack
打包的构建流程。compilation
对象是每一次构建的上下文对象,它包含了当次构建所需要的所有信息,每次热更新和重新构建,compiler
都会重新生成一个新的compilation
对象,负责此次更新的构建过程。