[JavaScript知识库]webpack原理

看书《深入浅出Webpack》

Webpack就是读取配置config，从配置的入口开始递归找模块，通过loader将模块进行转换（比如ES6转ES5、解析json文件、postCss预处理），在整个构建过程中抛出各个阶段的事件，plugins监听事件去做事情，处理完后输出结果。

Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程。

• 初始化参数
• 开始编译
• 确定入口
• 编译模块
• 完成模块编译
• 输出资源
• 输出完成

Webpack的事件流机制基于Tapable，核心Compiler对象和Compilation对象都继承于Tapable。

Compiler对象包含了Webpack环境的所有配置信息，包含options、loaders、plugins等信息。这个对象在Webpack启动时被实例化，它是全局唯一的，可以简单地将它理解为Webpack实例。

Compilation对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation对象也提供了很多事件回调供插件进行扩展。

Compiler和Compilation的区别在于：Compiler代表了整个Webpack从启动到关闭的生命周期，而Compilation只代表一次新的编译。

（“Compilation只代表一次新的编译”，就是比如开启watch监听时，文件变化后就会进行一次新的编译）

首先创建Compiler对象实例，通过webpack.config.js以及执行脚本参数获取到所有配置，其中的plugins在此时进行创建插件实例。配置和实例，以及之后的输出结果都在存Compiler对象实例中。
（执行脚本参数是指，如 webpack-dev-server --hot，则hot就是参数）
（plugins的配置都是如new WebPlugin({…})，即创建WebPlugin的实例）

plugins内部有个constructor(options)，即new WebPlugin(options)时执行的构造方法。还有个apply(compiler)方法会在一次编译初始化时被调用，即创建Compilation对象实例时，会调用插件实例的apply方法，并把当前compiler传入，在apply方法中为compiler绑定事件，如

apply(compiler){
  compiler.plugin('compilation',function(compilation){
	//...
	})
}

以上代码表示，这个插件的功能是在compilation阶段，即编译阶段，做某些事情。

plugins可以作用于任何阶段。具体有哪些阶段网上没找着，书里有写：
（后续更新）

其中，在compilation阶段中，会使用loader去转换模块。即在loader中，初始化时传入一段代码，进行操作后，再返回这段代码的翻译版本。

最后看一下构建完成的输出文件结构：
(是一个立即执行函数，传参是编译后所有模块的集合，是个数组)

(function(modules){
	//可以在浏览器中执行的require函数，模拟node中的require，用于各个编译后模块间的引用，编译后的模块用moduleId索引取用
	function __webpack_require__(){
		//...
	}
	//执行启动函数：执行存放所有模块数组中的第0个模块
	__webpack_require__(0);
})([/*存放所有模块的数组*/]);

官网也有一些原理的描述：
https://webpack.docschina.org/concepts/plugins/#anatomy