【node.js】DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

博客讲述了在遇到webpack启动时的DeprecationWarning警告后,如何从旧API迁移到新的webpack hooks API。作者发现所使用的open-browser-webpack-plugin已长时间未更新,因此决定移除该插件,转而利用node.js的child_process模块直接启动浏览器。通过这个方法,作者成功消除了警告并实现了相同的功能。

报错: 之前 node 服务启动之后,发现会报错 DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead

问题原因

这是 webpack 的告警,因为 webpack 插件使用了旧的 API 导致的。
webpack-error

再对比 webpack 的提示,需要修改调用方式 官方文档

// 旧
compiler.plugin('watch-run', function checkWatchingMode(watching, done) {
  isWatching = true;
  done();
});

// 新
compiler.hooks.watchRun.tap('watch-run', function checkWatchingMode(watching, done) {
  isWatching = true;
  done();
});

然后翻看插件文档 open-browser-webpack-plugin@0.0.5,发现已经好几年没有更新了。。。

突然想起 node.js 好像可以直接启动浏览器并打开某网址。所以去掉插件,使用 node.js 的内置模块 child_process

参考代码:

const childProcess = require('child_process');
// 使用默认浏览器打开
childProcess.exec('start http://www.baidu.com');
// 使用指定浏览器打开
childProcess.exec('start firefox http://www.baidu.com');
操,根据你的提示操作,现在报错(node:11716) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency (Use `node --trace-warnings ...` to show where the warning was created) (node:11716) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'find' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'head' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'set' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'test' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'to' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency (node:11716) Warning: Accessing non-existent property 'which' of module exports inside circular dependency (node:11716) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (node:11716) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead D:\code\Java_Code\car-website\car-admin\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 D:\code\Java_Code\car-website\car-admin\node_modules\html-webpack-plugin\lib\compiler.js:81:51 at D:\code\Java_Code\car-website\car-admin\node_modules\webpack\lib\Compiler.js:306:11 at D:\code\Java_Code\car-website\car-admin\node_modules\webpack\lib\Compiler.js:631:15 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\Hook.js:154:20) at D:\code\Java_Code\car-website\car-admin\node_modules\webpack\lib\Compiler.js:628:31 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\Hook.js:154:20) at D:\code\Java_Code\car-website\car-admin\node_modules\webpack\lib\Compilation.js:1325:35 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\Hook.js:154:20) at D:\code\Java_Code\car-website\car-admin\node_modules\webpack\lib\Compilation.js:1316:32 at eval (eval at create (D:\code\Java_Code\car-website\car-admin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1) at D:\code\Java_Code\car-website\car-admin\node_modules\terser-webpack-plugin\dist\index.js:286:9 at TaskRunner.run (D:\code\Java_Code\car-website\car-admin\node_modules\terser-webpack-plugin\dist\TaskRunner.js:37:7) at TerserPlugin.optimizeFn (D:\code\Java_Code\car-website\car-admin\node_modules\terser-webpack-plugin\dist\index.js:201:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vueadmin@1.0.5 dev: `node build/dev-server.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vueadmin@1.0.5 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\LD\AppData\Roaming\npm-cache\_logs\2025-08-22T09_05_54_191Z-debug.log
最新发布
08-23
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值