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
标签：Compilation,Webpack,编译,webpack,实例,模块,plugins,原理 来源： https://blog.csdn.net/sinat_38783046/article/details/120937295