HardSourceWebpackPlugin源码解析：从入口到缓存写入的完整流程-平芜编程栈

HardSourceWebpackPlugin源码解析：从入口到缓存写入的完整流程

【免费下载链接】hard-source-webpack-plugin项目地址: https://gitcode.com/gh_mirrors/ha/hard-source-webpack-plugin

HardSourceWebpackPlugin是一个为Webpack构建过程提供持久化缓存的插件，能够显著提升二次构建速度。本文将深入解析其核心工作流程，从插件初始化到缓存写入的完整过程。

一、插件初始化：入口类的构造与配置处理

HardSourceWebpackPlugin的核心逻辑集中在index.js文件中的同名类实现。当Webpack启动时，插件首先通过构造函数接收用户配置：

class HardSourceWebpackPlugin { constructor(options) { this.options = options || {}; } // ... }

在apply方法中（Webpack插件的标准入口），插件完成三项关键初始化工作：

环境配置处理：通过envHash模块生成环境哈希，确保不同环境下的缓存隔离
缓存路径设置：默认使用find-cache-dir模块在系统缓存目录创建hard-source/[confighash]路径
序列化器工厂初始化：创建CacheSerializerFactory实例管理不同类型的缓存序列化

二、缓存系统架构：核心组件与依赖关系

HardSourceWebpackPlugin采用模块化设计，主要包含以下核心组件：

1. 缓存序列化工厂（CacheSerializerFactory）

位于lib/CacheSerializerFactory.js的此类是缓存系统的核心调度者。它通过Webpack的hardSourceCacheFactory钩子管理不同类型的序列化器：

class CacheSerializerFactory { create(info) { const factory = pluginCompat.call(this.compiler, 'hardSourceCacheFactory', [null]); return factory(info); } }

默认提供两种序列化器类型：

数据序列化器：基于SerializerAppend2Plugin处理JSON可序列化数据
文件序列化器：基于SerializerFilePlugin处理大文件和二进制数据

2. 缓存模块（Cache Modules）

系统实现了多种专用缓存模块，包括：

CacheAsset.js：处理资源缓存
CacheModule.js：管理模块编译结果
CacheEnhancedResolve.js：缓存模块解析结果
CacheMd5.js：处理内容哈希计算

这些模块通过cacheSerializerFactory.create()方法获取对应的序列化器实例：

// 示例：CacheAsset.js中的序列化器创建 (cacheSerializerFactory, cacheDirPath) => { assetCacheSerializer = cacheSerializerFactory.create({ name: 'asset', type: 'file', cacheDirPath: path.join(cacheDirPath, 'asset'), }); }

三、缓存工作流程：从读取到写入的完整周期

1. 缓存读取阶段（runReadOrReset）

在Webpack的run或watchRun钩子触发时，插件执行runReadOrReset方法：

环境验证：检查环境哈希、配置哈希和插件版本是否匹配
缓存目录初始化：若缓存目录不存在则创建并记录首次构建信息
序列化器创建：通过_hardSourceCreateSerializer钩子初始化所有缓存序列化器
缓存数据加载：调用_hardSourceReadCache钩子从磁盘加载缓存数据

关键代码路径：

compilerHooks.watchRun.tapPromise('HardSource - index - readOrReset', runReadOrReset); compilerHooks.run.tapPromise('HardSource - index - readOrReset', runReadOrReset);

2. 构建过程中的缓存应用

在Webpack构建过程中，多个转换插件（Transform Plugins）协同工作：

TransformNormalModulePlugin：拦截模块编译过程，优先使用缓存结果
TransformCompilationPlugin：处理整个编译过程的缓存逻辑
TransformAssetPlugin：管理资源生成的缓存

这些插件通过修改Webpack的模块处理流程，实现缓存数据的复用，避免重复编译。

3. 缓存写入阶段（afterCompile）

构建完成后，在afterCompile钩子中执行缓存写入：

数据准备：收集编译结果，通过freeze方法处理循环引用
目录确保：确保缓存目录存在
元数据写入：保存当前环境哈希和插件版本到stamp和version文件
缓存数据写入：调用_hardSourceWriteCache钩子持久化缓存数据

核心代码：

compilerHooks.afterCompile.tapPromise('HardSource - index', compilation => { return Promise.all([ mkdirp(cacheDirPath).then(() => Promise.all([ fsWriteFile(path.join(cacheDirPath, 'stamp'), currentStamp, 'utf8'), fsWriteFile(path.join(cacheDirPath, 'version'), hardSourceVersion, 'utf8'), ]) ), pluginCompat.promise(compiler, '_hardSourceWriteCache', [compilation, ...]), ]); });

四、高级特性：缓存策略与兼容性处理

1. 缓存清理机制

当环境或配置变化时，插件会自动清理旧缓存：

if (hash && stamp && hash !== stamp) { logMessages.environmentHashChanged(compiler); pluginCompat.call(compiler, '_hardSourceResetCache', []); return rimraf(cacheDirPath); }

2. Webpack版本兼容性

通过特性检测适配不同Webpack版本：

const webpackFeatures = { concatenatedModule: detectModule('webpack/lib/optimize/ConcatenatedModule'), generator: detectModule('webpack/lib/JavascriptGenerator'), }; let schemasVersion = 2; if (webpackFeatures.concatenatedModule) schemasVersion = 3; if (webpackFeatures.generator) schemasVersion = 4;