目录

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;
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
齐尹秦7 分钟前
CSS 轮廓(Outline)属性学习笔记
前端
齐尹秦9 分钟前
CSS 字体学习笔记
前端
入门级前端开发10 分钟前
css实现一键换肤
前端·css
xixixin_21 分钟前
css一些注意事项
前端·css
坊钰44 分钟前
【MySQL 数据库】增删查改操作CRUD(下)
java·前端·数据库·学习·mysql·html
excel1 小时前
webpack 模块 第 六 节
前端
Watermelo6171 小时前
Vue3+Vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案
前端·vue.js·数据挖掘·前端框架·vue·运维开发·持续部署
好_快1 小时前
Lodash源码阅读-flattenDepth
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseWhile
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-flatten
前端·javascript·源码阅读