弃用警告：Tapable.plugin 已弃用。在 .hooks 上使用新的 API

Question

我尝试运行 Vuetify VueJS Cordova 示例，但在 npm run dev 之后出现此错误

节点构建/dev-server.js

正在启动开发服务器… (node:1024) DeprecationWarning: Tapable.plugin 已弃用。在 .hooks 上使用新 API（节点：1024） DeprecationWarning：Tapable.apply 已弃用。而是直接在插件上调用 apply

如何解决？我已经更新了所有 NPM 包，没有帮助。

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

弃用消息：

弃用警告：不推荐使用 Tapable.apply。而是直接在插件上调用 apply

弃用警告：Tapable.plugin 已弃用。在 .hooks 上使用新 API

只是一个警告：

以下是遇到此消息的每个人的快速摘要。

这是什么信息？

webpack 4 使用新的插件系统并弃用了以前的 API。有 2 个新警告：

>  DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
> DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
>
> ```
>
> **这些是警告。** 它们被输出到控制台以警告我们的用户他们正在使用过时的 API，应该迁移到最新的。
>
> ## 这些警告有多 _糟糕_？
>
> 它们只是文本信息，而不是错误。 **如果你看到 `DeprecationWarning` 你可以忽略它，** 直到你必须更新到 webpack 的下一个主要版本。

因此，您无需或不应该对此做任何事情。

* * *

除此之外，我相信您会收到如下错误：

/tmp/my-project> npm run dev

my-project2@1.0.0 dev /tmp/my-project/my-project node build/dev-server.js

Starting dev server… (node:29408) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead (node:29408) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead /tmp/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81 var outputName = compilation.mainTemplate.applyPluginsWaterfall(‘asset-path’, outputOptions.filename, { ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function at /tmp/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81:51 at compile (/tmp/my-project/node_modules/webpack/lib/Compiler.js:242:11) at hooks.afterCompile.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compiler.js:487:14) at AsyncSeriesHook.eval as callAsync at AsyncSeriesHook.lazyCompileHook as _callAsync at compilation.seal.err (/tmp/my-project/node_modules/webpack/lib/Compiler.js:484:30) at AsyncSeriesHook.eval as callAsync at AsyncSeriesHook.lazyCompileHook as _callAsync at hooks.optimizeAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:966:35) at AsyncSeriesHook.eval as callAsync at AsyncSeriesHook.lazyCompileHook as _callAsync at hooks.optimizeChunkAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:957:32) at AsyncSeriesHook.eval as callAsync at AsyncSeriesHook.lazyCompileHook as _callAsync at hooks.additionalAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:952:36) at AsyncSeriesHook.eval as callAsync npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-project@1.0.0 dev: node build/dev-server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my-project@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

您应该将您的 `html-webpack-plugin` 更新到 [最新版本](https://github.com/jantimon/html-webpack-plugin/releases)：

npm install –save-dev html-webpack-plugin@3

”`

并且错误应该消失。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Webpack 4 或更高版本上，有几个插件可能会导致此警告，因为它们仍在使用旧的插件 API，它们需要升级。要查找导致警告的插件，请将其放在 webpack 配置文件的顶部：

process.traceDeprecation = true

您将看到详细的堆栈跟踪，如下所示：

  (node:10213) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
   at FriendlyErrorsWebpackPlugin.apply (./node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:39:14)
   at webpack (./node_modules/webpack/lib/webpack.js:37:12)
   at processOptions (./node_modules/webpack-cli/bin/webpack.js:436:16)
   at <anonymous>
   at process._tickCallback (internal/process/next_tick.js:160:7)
   at Function.Module.runMain (module.js:703:11)
   at startup (bootstrap_node.js:193:16)
   at bootstrap_node.js:617:3

在这种情况下，这意味着 friendly-errors-webpack-plugin 负责警告。

或者，您可以运行添加 --trace-deprecation 标志的节点进程。

在您找到导致警告的插件后，使用您的包管理器升级它，并且警告应该消失：

npm update friendly-errors-webpack-plugin

如果您不想完全禁止此类弃用警告（不推荐），请使用 process.noDeprecation = true

原文由 Maikel Ruiz 发布，翻译遵循 CC BY-SA 4.0 许可协议