运行Vuetify VueJS Cordova示例遇Tapable废弃警告如何解决？

这个问题我之前帮朋友排查过，本质是Webpack的Tapable API更新导致的旧依赖兼容问题——你看到的弃用警告是因为项目里的某些插件（比如vue-loader、webpack-dev-server这类和Webpack交互的工具）还在使用Tapable的旧plugin和apply方法，而新版本Webpack已经改用hooks API了。

虽然你更新了npm包，但可能是依赖树里的深层依赖没更新，或者某些关键依赖版本没跟上，给你几个分步解决的方案：

• 先确认Webpack版本
  运行以下命令查看当前项目的Webpack版本：

  npm list webpack
  

  如果是Webpack 4及以上版本，那必须确保所有Webpack相关插件都支持hooks API（比如vue-loader需要v15+版本）。

• 更新关键依赖到兼容版本
  手动指定并更新这些核心依赖的版本，比如在package.json里修改后执行npm install：

  {
    "devDependencies": {
      "webpack": "^4.46.0",
      "vue-loader": "^15.10.1",
      "webpack-dev-server": "^3.11.3",
      "html-webpack-plugin": "^4.5.2"
    }
  }
  

  这些版本是经过验证能兼容Webpack 4 hooks API的，你可以根据实际情况调整到最新兼容版。

• 清理依赖缓存与锁文件
  有时候更新包后，旧版本依赖会通过锁文件残留，执行以下步骤彻底清理：

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json（如果用yarn则删除yarn.lock）
  3. 重新执行npm install

• 检查自定义Webpack配置
  如果项目里有自定义的webpack.config.js或build/dev-server.js文件，看看有没有直接使用Tapable旧API的代码，比如：

  // 旧写法（会触发警告）
  compiler.plugin('compile', function() {
    // ...
  });
  

  要改成hooks的新写法：

  // 新写法
  compiler.hooks.compile.tap('MyCustomPlugin', function() {
    // ...
  });
  

• 检查Cordova相关插件兼容性
  因为是Cordova项目，可能使用的cordova-plugin-webpack或其他Cordova-webpack集成工具版本过旧，执行以下命令更新相关插件：

  cordova plugin update cordova-plugin-webpack
  

  如果没有安装这个插件，确认项目里的Cordova配置是否和当前Webpack版本冲突。

• 临时抑制警告（应急方案）
  如果暂时没时间彻底修复，可以在启动命令里添加参数屏蔽弃用警告，修改package.json里的scripts：

  {
    "scripts": {
      "dev": "node --no-deprecation build/dev-server.js"
    }
  }
  

  注意：这只是临时掩盖问题，不推荐长期使用，还是建议从根源解决依赖兼容问题。

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