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

Question

我尝试运行 Vuetify VueJS Cordova example 但在 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 包，但没有帮助。

Answer 1

弃用信息：

DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

是just a warning:

Here is a quick summary for everyone encountering this message.

What is this message?

webpack 4 is using a new plugin system and deprecates the previous APIs. There are 2 new warnings:
DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
These are warnings. They are outputted to the console to warn our users that they are using an outdated API and should migrate to the newest.

How bad are these warnings?

They are only a textual information, not errors. If you see a DeprecationWarning you can ignore it until you have to update to the next major version of 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 更新为 latest version:

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

错误应该会消失。

Answer 2

在我的例子中，问题出在 webpack-cleanup-plugin 中。我用 clean-self-webpack-plugin 替换这个插件后修复了它。

Answer 3

有几个插件可能会在 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

Answer 4

我遇到了同样的问题。使用此命令解决：-

npm install --save-dev extract-text-webpack-plugin@next

NPM 6.4.1
Node 10.9.0
Webpack 4.22.0

Answer 5

当我尝试运行 webpack-dev-server 两次时，我运行陷入了这个问题，一个运行在一个终端中，另一个我尝试运行在不同的终端。运行只有一个解决了问题。

Answer 6

在我的例子中，弃用通知是由 webpack-md5-hash 包提出的。

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

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

npm

cordova

webpack

vue.js

vuetify.js

What is this message?

How bad are these warnings?