Tapable.plugin is deprecated. Use new API on .hooks instead emit 终于找到解决方法了

这几天升级公司的vue项目的webpack版本，项目的webpack原来是3.2.0，这次计划升级到4.x，我这次升级的版本是4.41.4。

升级的过程，肯定是面对很多报错的，大部分都在网上查资料解决了，但是这个问题Tapable.plugin is deprecated. Use new API on .hooks instead emit，查了很多资料，大部分博客的回答都是升级extract-text-webpack-plugin组件，按照博客升级

npm i -D extract-text-webpack-plugin@next，

发现并没有用，继续专研，有说把webpack版本降低到4.1.0，也试了，没有效果。卡在了这一步，看来只有换条路了，先来分析一波错误原因（之前都是复制过来直接查的，没仔细看），查了Tapable.plugin，是和webpack的源码有关系，头有点大，不要怕，继续查，找到了原因，这是因为使用的webpack插件中，使用了旧的API导致的，如下所示：

而官方文档最新提供的API如下:

解决方案：在项目中全局搜索compiler.plugin, （webstrom）ctrl+shift+F 选择scope，查看有哪些插件使用了这个，而且是没有加判断webpack版本直接使用的，下面是截取的加判断的，这样的插件不需要管，

if (compiler.hooks) {
  const plugin = { name: 'FriendlyErrorsWebpackPlugin' };

  compiler.hooks.done.tap(plugin, doneFn);
  compiler.hooks.invalid.tap(plugin, invalidFn);
} else {
  compiler.plugin('done', doneFn);
  compiler.plugin('invalid', invalidFn);
}

搜索结果是html-webpack-plugin和copy-webpack-plugin两个插件没有判断，直接卸载，然后安装最新的版本，npm install xxx@next，运行npm run dev，正常运行。

过程有点曲折，但是挺开心的，解决了这个问题。最后建议大家在升级的时候可以把对应的一些插件升级到最新，或者查看npm官网，升级到最近的版本。

参考博客：blog.csdn.net/u013243347/…