webpack 源码分析（三)

从上文开始，我们分析到了NodeEnvironmentPlugins，知道了webpack是怎么优化文件读取的。

我们接着看剩下没看的代码

compiler.inputFileSystem = new CachedInputFileSystem(fs, 60000);
const inputFileSystem = compiler.inputFileSystem;
compiler.outputFileSystem = fs;
compiler.intermediateFileSystem = fs;
compiler.watchFileSystem = new NodeWatchFileSystem(
	compiler.inputFileSystem
);
compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
	if (compiler.inputFileSystem === inputFileSystem) {
		compiler.fsStartTime = Date.now();
		inputFileSystem.purge();
		}
});

我们发现该分析watchFileSystem函数了，这回我就大概说一下NodeWatchFileSystem做了什么，其实watch，webpack自己也是自己封装的库，因为他们觉得node的api不好用，于是自己用轮询的方式，查询fs.lsstat通过时间来判断是否发生了修改，封装了这个函数，传参用的是compiler.inputFileSystem，这样可以利用之前的缓存优化。感兴趣的可以自己看一下，因为webpack设计的太多了，这里我就不过多介绍了，有了上一章的缓存经验，看这里我觉得难度骤降。

最后执行compiler.hooks.beforeRun.tap，给compiler增加hooks，如果输入流没变，那我执行inputFileSystem.purge();，目的是重置上一章所说的data和levels，其实就是初始化，fsStartTime 给他赋值初始时间

那通过我们所了解到的NodeEnvironmentPlugins，我们是不是可以了解到什么是plugin，我们目前可以得到的webpack plugins的知识点有:

1. webpack 存在一个叫做compiler的对象，这个对象上有很多tapable hooks方法。
2. apply(compiler) 方法的第一个参数就是这个compiler对象，我们通过拿到compiler对象，我们可以修改compiler对象的属性和方法，以及可以拿到对应的钩子函数，在其在对应的周期执行。

这些只是plugins的一部分知识点，我们继续往下看

const createCompiler = rawOptions => {
	// options是webpack.config.js的配置
	const options = getNormalizedWebpackOptions(rawOptions);
	// 配置default context 和日志
	applyWebpackOptionsBaseDefaults(options);
	const compiler = new Compiler(options.context, options);
	// 初始化 各种流如inputFileSystem
	new NodeEnvironmentPlugin({
		infrastructureLogging: options.infrastructureLogging
	}).apply(compiler);
	if (Array.isArray(options.plugins)) {
		for (const plugin of options.plugins) {
			if (typeof plugin === "function") {
				plugin.call(compiler, compiler);
			} else {
				plugin.apply(compiler);
			}
		}
	}
	applyWebpackOptionsDefaults(options);
	compiler.hooks.environment.call();
	compiler.hooks.afterEnvironment.call();
	// 判断options上一些特定属性，加载plugins
	new WebpackOptionsApply().process(options, compiler);
	compiler.hooks.initialize.call();
	return compiler;
};

这个plugins，我们分析完了，突然发现，createCompiler以及过半了，是不是看到希望了

我们发现下一行，是处理options.plugins也就是我们webpack.config.js中的plugins

判断plugins是方法还是对象，如果是方法就plugins.call(compiler,compiler),如果是对象就apply(compiler)

从中我们又可以得到信息，plugin，有两种一种是方法，对象第一个参数是compiler，也可以是一个对象，对象中含有apply方法，并给apply方法传递compiler参数。