Webpack从v1升级到v2后出现Tapable的apply属性未定义错误

刚看到你这个报错，我之前帮同事把项目从Webpack v1升级到v2时，也碰到过一模一样的问题！这个错误本质是某个Webpack插件没有被正确初始化，或者插件版本和Webpack v2不兼容，导致Compiler.apply调用时传入了undefined的插件实例，才触发了这个Tapable里的报错。

下面是我当时排查和解决的具体步骤，亲测有效：

1. 先检查插件的版本兼容性 #

Webpack v2对插件的要求比v1严格很多，不少老插件直接用会出问题：

• 打开你的package.json，逐个核对Webpack相关插件的版本，比如旧版的extract-text-webpack-plugin在v2里需要升级到^2.1.0版本才行；
• 执行npm ls查看依赖树，看看有没有插件显示missing或者版本冲突的情况，如果有，重新安装对应插件的兼容版本：

  npm install [插件名称]@适配v2的版本号 --save-dev
  

2. 检查webpack配置里的插件写法 #

Webpack v2对插件的实例化要求更严格，v1里有些“偷懒”的写法在v2里会失效：

• 比如v1里可能直接写require('some-plugin')就可以，但v2必须实例化插件：

  // ❌ 错误写法（v1可能兼容，v2不行）
  plugins: [
    require('some-plugin')
  ]
  
  // ✅ 正确写法
  const SomePlugin = require('some-plugin');
  plugins: [
    new SomePlugin(/* 这里传插件配置参数 */)
  ]
  

• 另外部分插件的配置参数结构在v2里有变化，记得对照插件的官方文档调整配置项。

3. 排查Tapable依赖冲突 #

这个报错来自Tapable.js，Webpack v2依赖的Tapable版本和v1差异很大。如果你的项目里有其他依赖强行安装了旧版Tapable，就会出现冲突：

• 直接删掉node_modules文件夹和package-lock.json（或yarn.lock），然后重新执行npm install，让npm自动拉取所有依赖的正确版本；
• 要是还是有问题，可以在package.json里明确指定Tapable的版本（Webpack v2对应的Tapable版本一般是^2.0.0左右，具体可以看Webpack v2的package.json依赖）。

4. 逐个排查插件锁定问题 #

如果上面的方法都没解决，建议逐个注释掉配置里的插件，每次注释一个就重新运行Webpack，找到是哪个插件导致的报错，然后针对性地升级或者替换这个插件就行。

内容的提问来源于stack exchange，提问作者pranavj95