webpack 核心编译器 十七 节

  • Compilation.prototype.factorizeModule 的重载与注册方式。

  • 移除的旧 API 接口 modifyHashcache,并通过 util.deprecate 提示开发者使用新的方式。

  • 一系列的 PROCESS_ASSETS_STAGE_* 常量,用于定义在资源处理流程中的不同阶段。

数值的含义 这些常量是阶段的"优先级权重",Webpack 会按 数值从小到大排序执行钩子函数(Hook) ,因此:

  • 数值小:阶段越靠前,越早执行。
  • 数值大:阶段越靠后,越晚执行。
js 复制代码
/**
 * @typedef {object} FactorizeModuleOptions
 * @property {ModuleProfile=} currentProfile 当前模块的性能分析信息(可选)
 * @property {ModuleFactory} factory 模块工厂实例
 * @property {Dependency[]} dependencies 要因式分解的依赖数组
 * @property {boolean=} factoryResult 是否返回完整的 ModuleFactoryResult(默认为只返回 module)
 * @property {Module | null} originModule 源模块(即谁引用了这些依赖)
 * @property {Partial<ModuleFactoryCreateDataContextInfo>=} contextInfo 上下文信息(可选)
 * @property {string=} context 模块因式分解时使用的上下文路径(可选)
 */

/**
 * 因式分解模块:将依赖转换为模块。
 * @param {FactorizeModuleOptions} options 配置项对象
 * @param {ModuleCallback | ModuleFactoryResultCallback} callback 回调函数
 * @returns {void}
 */

// 由于 TypeScript 不支持类中使用 JSDoc 进行函数重载,这里用了一种绕过方式
/* eslint-disable jsdoc/require-asterisk-prefix */
Compilation.prototype.factorizeModule = /**
	 @type {{
	(options: FactorizeModuleOptions & { factoryResult?: false }, callback: ModuleCallback): void;
	(options: FactorizeModuleOptions & { factoryResult: true }, callback: ModuleFactoryResultCallback): void;
}} */ (
		function (options, callback) {
			this.factorizeQueue.add(options, callback); // 添加到因式分解队列中,异步处理
		}
	);
/* eslint-enable jsdoc/require-asterisk-prefix */

// 用于隐藏某些属性(例如过时的属性)不被 TypeScript 检测
const compilationPrototype = Compilation.prototype;

// TODO webpack 6 删除:废弃接口 modifyHash
Object.defineProperty(compilationPrototype, "modifyHash", {
	writable: false,
	enumerable: false,
	configurable: false,
	value: () => {
		throw new Error(
			"Compilation.modifyHash 被移除,请改用 Compilation.hooks.fullHash"
		);
	}
});

// TODO webpack 6 删除:废弃接口 cache
Object.defineProperty(compilationPrototype, "cache", {
	enumerable: false,
	configurable: false,
	get: util.deprecate(
		/**
		 * @this {Compilation} 当前 compilation 实例
		 * @returns {Cache} 缓存对象
		 */
		function () {
			return this.compiler.cache; // 实际调用 compiler 上的 cache
		},
		"Compilation.cache 已被移除,请使用 Compilation.getCache()",
		"DEP_WEBPACK_COMPILATION_CACHE"
	),
	set: util.deprecate(
		/**
		 * @param {any} v 设置值(忽略)
		 */
		v => { },
		"Compilation.cache 已被移除,请使用 Compilation.getCache()",
		"DEP_WEBPACK_COMPILATION_CACHE"
	)
});

/**
 * 添加额外资源的阶段。
 */
Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL = -2000;

/**
 * 资源预处理阶段。
 */
Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS = -1000;

/**
 * 基于现有资源派生新资源。
 * 现有资源不应视为最终完成。
 */
Compilation.PROCESS_ASSETS_STAGE_DERIVED = -200;

/**
 * 向现有资源中添加额外内容,例如版权头部或初始化代码。
 */
Compilation.PROCESS_ASSETS_STAGE_ADDITIONS = -100;

/**
 * 一般性优化资源,例如格式统一等。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE = 100;

/**
 * 优化资源数量,例如合并资源(同类型资源)。
 * 不同类型资源合并应使用 PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT = 200;

/**
 * 优化资源的兼容性,例如添加 polyfill 或厂商前缀。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY = 300;

/**
 * 优化资源体积,例如压缩、删除多余空白等。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE = 400;

/**
 * 为资源添加开发工具支持,例如提取 source map。
 */
Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING = 500;

/**
 * 优化资源数量,例如将资源内联到其他资源中(适用于不同类型资源)。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE = 700;

/**
 * 总结资源列表,例如生成 Service Worker 的资源清单。
 */
Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE = 1000;

/**
 * 优化资源的哈希值,例如根据内容生成真实哈希。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH = 2500;

/**
 * 优化资源传输,例如预生成压缩文件(gzip)。
 */
Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER = 3000;

/**
 * 分析现有资源。
 */
Compilation.PROCESS_ASSETS_STAGE_ANALYSE = 4000;

/**
 * 创建用于报告的资源,例如构建报告、体积分析等。
 */
Compilation.PROCESS_ASSETS_STAGE_REPORT = 5000;

module.exports = Compilation;
相关推荐
酷爱码3 分钟前
HTML5表格语法格式详解
前端·html·html5
hello_ejb35 分钟前
聊聊JetCache的缓存构建
java·前端·缓存
堕落年代8 分钟前
SpringSecurity当中的CSRF防范详解
前端·springboot·csrf
美酒没故事°38 分钟前
纯css实现蜂窝效果
前端·javascript·css
GISer_Jing1 小时前
React useState 的同步/异步行为及设计原理解析
前端·javascript·react.js
mini榴莲炸弹1 小时前
什么是SparkONYarn模式?
前端·javascript·ajax
能来帮帮蒟蒻吗1 小时前
VUE3 -综合实践(Mock+Axios+ElementPlus)
前端·javascript·vue.js·笔记·学习·ajax·typescript
酷爱码1 小时前
HTML5中的Microdata与历史记录管理详解
前端·html
开开心心就好1 小时前
高效全能PDF工具,支持OCR识别
java·前端·python·pdf·ocr·maven·jetty
郭尘帅6663 小时前
vue3基础学习(上) [简单标签] (vscode)
前端·vue.js·学习