webpack原理

2021-10-24 18:30:13 阅读：162 来源： 互联网

标签：Compilation Webpack 编译 webpack 实例模块 plugins 原理

看书《深入浅出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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack原理