弃用警告:Tapable.plugin已被弃用,请改用“`.hooks`”上的新API。

27
我尝试运行Vuetify VueJS Cordova示例,但在npm run dev后遇到以下错误:

node build/dev-server.js

Starting dev server... (node:1024) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead (node:1024) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

该如何解决呢? 我已经更新了所有的NPM包,但没有帮助。
6个回答

27

在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


1
这对于调试非常有用! - Hongbo Miao

24

这是一个弃用警告信息:

DeprecationWarning: Tapable.apply被弃用。直接在插件上调用apply方法
DeprecationWarning: Tapable.plugin被弃用。使用.hooks的新API代替

这只是一个警告

以下是对于遇到此消息的人的快速总结。

这个消息是什么意思?

Webpack 4正在使用一种新的插件系统,并弃用了以前的API。有两个新的警告:

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] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at compilation.seal.err (/tmp/my-project/node_modules/webpack/lib/Compiler.js:484:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:966:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:957:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:952:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
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 更新至最新版本

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

错误应该会消失。


2
注意:我已经在他们的存储库中创建了一个PR来修复这个问题:https://github.com/vuetifyjs/cordova/pull/18 - acdcjunior
1
我无法在安卓上进行测试,但是已经有一些进展:PR已被接受,而且其他问题(如果还没有被解决)也有解决方法 - 请参见讨论https://github.com/vuetifyjs/cordova/issues/19。 - acdcjunior
老实说,我还没有为Android开发过(不过我知道npm)。但是看起来你可以使用cordova客户端,例如cordova build来获取apk - acdcjunior
很不幸,在执行 npm install --save-dev html-webpack-plugin@4 后,我仍然遇到了错误。 - Ryan
我已经安装并尝试了WebPack插件的两个版本:1>npm install --save-dev html-webpack-plugin@3,2>npm install --save-dev html-webpack-plugin@4。但仍然收到弃用消息。 - thinkerBOB
显示剩余2条评论

5
我曾经遇到过同样的问题。通过执行以下命令解决了该问题:
npm install --save-dev extract-text-webpack-plugin@next
NPM 6.4.1
Node 10.9.0
Webpack 4.22.0 

1
很不幸,在执行了 npm install --save-dev extract-text-webpack-plugin@next 之后,我仍然遇到了错误。 - Ryan

1

当我尝试在两个终端中运行webpack-dev-server时,遇到了这个问题。只运行一个解决了这个问题。


1
在我的情况下,被 webpack-md5-hash 包引发了弃用通知。

0
在我的情况下,问题出在webpack-cleanup-plugin上。我已经用clean-self-webpack-plugin替换了这个插件,问题得到了解决。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接