如何解决service-worker-loader触发的Compilation.cache弃用警告

问题修复状态 #

• service-worker-loader 4.0.2版本尚未修复该弃用问题，该警告触发原因是webpack 5已废弃Compilation.cache属性，统一改用Compilation.getCache()方法获取缓存实例，而4.0.2版本源码仍使用旧API实现缓存逻辑。

可行解决方案 #

• 方案1：使用patch-package永久修复本地依赖问题
  1. 安装补丁工具：npm install patch-package --save-dev
  2. 找到node_modules/service-worker-loader/lib/index.js中的问题代码段，替换为以下内容：

  onCompilerHook(compiler, 'compilation', compilation => {
    compilation.cache = compilation.getCache(subCache);
  });
  

  3. 执行命令生成补丁：npx patch-package service-worker-loader
  4. 在package.json的scripts字段中添加postinstall钩子："postinstall": "patch-package"，后续重新安装依赖时会自动应用该补丁。
• 方案2：临时隐藏警告（不影响正常构建功能）
  在运行webpack构建命令时添加--no-deprecation参数即可屏蔽该弃用警告，示例命令：

  node --no-deprecation node_modules/webpack/bin/webpack.js --mode=development
  

• 方案3：等待官方版本更新
  后续service-worker-loader发布高于4.0.2的正式版本时，直接升级到官方修复版本即可解决该问题。

内容的提问来源于stack exchange，提问作者Elena Alexeenko