Устаревшее предупреждение: Tapable.plugin устарел. Вместо этого используйте новый API для `.hooks`

Ответ 1

Сообщение об устаревании:

DeprecationWarning: Tapable.apply устарела. Звоните применять на плагин прямо вместо
DeprecationWarning: Tapable.plugin устарела. .hooks этого используйте новый API на .hooks

Это просто предупреждение:

Вот краткое резюме для всех, кто сталкивался с этим сообщением.

Что это за сообщение?

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

> [email protected] 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! [email protected] dev: 'node build/dev-server.js'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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 [email protected]

И ошибка должна уйти.

Ответ 2

Есть несколько плагинов, которые могут вызывать это предупреждение в Webpack 4, потому что они все еще используют старый API плагинов, их необходимо обновить до последней версии. Чтобы узнать, какой плагин вызывает предупреждение, поместите его в верхнюю часть конфигурационного файла вашего веб-пакета:

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.

После того, как вы обнаружите, какой плагин вызывает предупреждение, обновите его, используя менеджер пакетов, и предупреждение должно исчезнуть:

yarn upgrade friendly-errors-webpack-plugin

Если вы не хотите полностью исключать предупреждения об устаревании, подобные этому (НЕ РЕКОМЕНДУЕТСЯ), используйте process.noDeprecation = true

Это помогло мне быстро найти проблему, надеюсь, это поможет другим.

Ответ 3

Я столкнулся с той же проблемой. Решено с помощью этой команды: -

Установка npm --save-dev extract-text-webpack-plugin @next

NPM 6.4.1
Node 10.9.0
Webpack 4.22.0 

Ответ 4

В моем случае проблема была в webpack-cleanup-plugin. Я исправил это после замены этого плагина на плагин clean-self-webpack-plugin.

Ответ 5

Я столкнулся с этой проблемой, когда попытался запустить webpack-dev-server дважды: один работал в одном терминале, другой - в другом терминале. Запуск только один решил проблему.

Ответ 6

В моем случае уведомление об устаревании было WebpackMd5Hash пакетом WebpackMd5Hash.