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;
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试