webpack源码快速分析

Webpack源码分析

Webpack重要概念

Tapable

Webpack是一种基于事件流的编程范式实现，内部通信跳转全部基于事件流，Tapable是一个类eventemitter库的实现，控制各种钩子函数的发布订阅，控制webpack整个插件事件通信

js 复制代码

// 定义hook
const hook = new SyncHook(['a']);
// 绑定hook, 类似on
hook.tap('hook', (a) => console.log(a));
// 触发hook, 类似emit
hook.call(1)

Compiler

Compiler基于Tapable定义了各种钩子函数供外部调用, webpack启动后，就会创建Compiler对象，是一个编译管理器；

Compilation

Compilation基于Tapable定义各种钩子函数供外部调用，单次编译的管理器，webpack运行过程，只会实例化一个Compiler，但是每次文件变成，都会实例化一个新的Compilation;

plugin

plugin是什么

webpack中的插件就是带有apply的函数的类, plugin参与到整个webpack构建的过程,

javascript 复制代码

class xxPlugin{
  constructor(){ }
  apply(compiler) {
    
  }
}

plugin执行

webpack.config.js配置中实例化插件以后，在webpack源码里面直接调用对应的apply方法，并把compiler注入;

内部监听了Compiler和Compilation各种钩子函数，来实现对webpack在各个阶段的编译过程影响;

js 复制代码

const createCompiler = (rawOptions, compilerIndex) => {
	const options = getNormalizedWebpackOptions(rawOptions);
	const compiler = new Compiler(
		/** @type {string} */ (options.context),
		options
	);
	if (Array.isArray(options.plugins)) {
		for (const plugin of options.plugins) {
			if (typeof plugin === "function") {
				/** @type {WebpackPluginFunction} */
				(plugin).call(compiler, compiler);
			} else if (plugin) {
				plugin.apply(compiler);
			}
		}
	}
}