Tapable
webpack最主要的两大模块:负责编译的Compiler和创建bundle的Compilation。而这两个模块都是继承自Tapable。
Tapable内部通过对事件的注册监听,触发webpack生命周期的函数方法。
Compiler
每次执行webpack构建的时候,在webpack内部,会首先实例化一个Compiler对象。调run 方法执行一次完整的编译过程。
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
// 实例化compiler对象
const compiler = webpack(webpackConfig);
// 开始执行
compiler.run(callback);
// 上面两句等价于
webpack(webpackConfig, callback);
Compilation
针对的是随时可变的项目文件,只要文件有改动,Compilation 就会被重新创建。
根据entry提供的入口文件,通过loader将这些文件进行解析,生成chunk,再通过plugin生成最后的bundle;最后根据output,存储到对应的位置。
Compiler和Compilation的关系
- Compiler:代表的是不变的 Webpack 环境,是针对 Webpack 的。
- Compilation:针对的是随时可变的项目文件,只要文件有改动,Compilation 就会被重新创建。
在普通打包模式下,webpack 的 Compiler 和 Compilation 是一一对应的关系; watch 模式下,Webpack 的 Compiler 会因为文件变化而产生多次打包流程,所以 Compiler 和 Compilation 是一对多关系
webpack工作流程
主要由三个阶段:
- 准备阶段:创建compiler和compilation对象;
- 编译阶段:完成modules的解析,生成chunks;
- 产出阶段:根据chunks,生成最终的文件;