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);
			}
		}
	}
}

loader

webpack只能处理js相关的资源文件,但是在项目中有图片,css等各种资源文件,需要调用lodaer转成JS内容;

webpack构建过程

webpack整个构建过程分为两个阶段, 1 初始化阶段, 2 构建阶段; 3. 优化阶段; 4. 生成阶段

初始化阶段

主要对传入的配置做一些校验处理,和内置默认配置合并处理,还有一些内置插件,传入插件的初始化处理。

配置校验处理

webpack基于schema-utils, 内置了schema的校验规则,对webpack相关传入的配置做校验。

默认配置合并处理

在创建createCompiler中,通过getNormalizedWebpackOptions + applyWebpackOptionDefaults将传入的options配置和内置默认配置合并处理

插件初始化处理

webpack中的插件大部分都是带有apply的函数,所以初始化过程中大部分是调用插件上的apply方法,并把创建好的compiler传入

构建过程

整个构建过程,从mark钩子开始触发,基于entry开始做依赖分析,最后得到module的集合和其之间的依赖关系

优化阶段

主要将上一步生成的module按照优化的配置组织成chunks;

产出阶段

将上一步生成的chunks写入outputPath路径下,产出文件;

相关推荐
李鸿耀25 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈44 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码2 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo2 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站