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

【问题标题】：DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead弃用警告：Tapable.plugin 已弃用。在 .hooks 上使用新的 API
【发布时间】：2018-10-01 05:24:14
【问题描述】：

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

节点构建/dev-server.js

正在启动开发服务器... (node:1024) DeprecationWarning: Tapable.plugin 已弃用。改为在 .hooks 上使用新 API (node:1024) DeprecationWarning: Tapable.apply 已弃用。称呼而是直接应用在插件上

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

【问题讨论】：

标签： cordova npm webpack vue.js vuetify.js

【解决方案1】：

弃用消息：

弃用警告：Tapable.apply 已弃用。致电申请插件直接代替
弃用警告：Tapable.plugin 已弃用。使用新的 API 改为.hooks

是just a warning:

这里是每个遇到此消息的人的快速摘要。

这是什么消息？

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] (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

错误应该会消失。

【讨论】：

注意：我在他们的仓库中创建了一个 PR 来解决这个问题：github.com/vuetifyjs/cordova/pull/18
npm run android 之后也会出现此错误：抛出新错误（^ 错误：路径变量 [contenthash] 未在此上下文中实现：css/[name].[contenthash].css 我更新了所有包，包括 Webpack 和“mini-css-extract-plugin”，但没有修复错误。有什么想法吗？
我无法使用 android 进行测试，但已经有了一些进展： PR 已被接受，并且其他问题（如果尚未更正）似乎有解决方法 - 请参阅讨论 github.com/vuetifyjs/cordova/issues/19。
谢谢，我现在可以使用了。是否可以直接从控制台编译 Android 应用程序 .apk，还是我需要在 Android Studio 中多做一步？
老实说，我还没有为 android 开发（不过我知道 npm）。但是您似乎会使用cordova 客户端，例如cordova build 来获取apk。

【解决方案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

【讨论】：

这对调试很有用！

【解决方案3】：

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

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

NPM 6.4.1
Node 10.9.0
Webpack 4.22.0

【讨论】：

不幸的是我在npm install --save-dev extract-text-webpack-plugin@next之后仍然收到错误

【解决方案4】：

我在尝试运行WebPack-Dev-Server两次运行WebPack-Dev-Server时遇到此问题，其中一个终端运行，另一个我尝试在不同的终端中运行。只运行一个即可解决问题。

【讨论】：

【解决方案5】：

就我而言，弃用通知是由 webpack-md5-hash 包提出的。

【讨论】：

【解决方案6】：

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

【讨论】：