Webpack4 升级报错 Error: Cannot find module 'webpack-cli/bin/config-yargs' 等（含html-webpack-plugin）

背景

把项目提交到GitHub之后，提示发现了安全问题（GitHub的新功能，自动发现项目内的安全问题），并且自动作出了修改，发起了Pull request。

看了提交的 commit 内容，只是把 webpack-dev-server 和 webpack-bundle-analyzer 版本从2.x升级到了3.x，并且不升级确实会导致比较严重的安全问题，于是就合并了Pull request

问题

---

合并分支后，再次 npm run dev 就开始报错了

问题一 Error: Cannot find module ‘webpack-cli/bin/config-yargs’

合并GitHub官方修改的分支后，第一次运行，提示 Cannot find module 'webpack-cli/bin/config-yargs'

原因一：缺少 webpack-cli 包

这个问题第一个可能是缺少 webpack-cli 包，但我的项目在之前是可以正常跑起来没有问题的，所以直接pass这个原因。

解决方案

如果有朋友是缺少这个包导致的，使用 npm i webpack-cli -D 命令安装即可（下面的命令三选一即可）

npm i webpack-cli -D		// 局部安装webpack-cli
cnpm i webpack-cli -D		// 使用淘宝镜像局部安装
npm install webpack-cli -g	// 全局安装

说明

npm：如果使用 npm 太慢，可以试试淘宝的 npm 镜像 cnpm 安装：cnpm i webpack-cli -D，具体说明看这里
i：install 命令的缩写，完整命令是 npm install webpack-cli -D
-D：本地安装，安装到当前项目文件夹，也可以使用 -g 命令全局安装

原因二：webpack 3.x 的版本与 webpack-dev-server 3.x 的版本不兼容

通过搜索发现了另外一个可能，即 webpack 3.x 的版本与 webpack-dev-server 3.x 的版本不兼容（点击查看原文），再一看我的 package.json 配置，果然 webpack 是 3.6.0，而webpack-dev-server 是刚刚升级上来的 3.1.11

解决方案一：降级 webpack-dev-server

上面指出版本兼容问题的文章提出，卸载全局或局部的 webpack-dev-server

npm uninstall webpack-dev-server -g      // 卸载全局
npm uninstall webpack-dev-server -D      // 卸载局部(本地)

然后安装指定版本的 webpack-dev-server@2.9.7

npm i webpack-dev-server@2.9.7 -D

解决方案二：升级 webpack 4

但是显然，降级不符合我的性格，刚刚才从低版本升级上来，又让我降级回去，那安全问题不是又来了？
所以既然 webpack 3.x 与 webpack-dev-server 3.x 不兼容，那我就把 webpack 升级到 4.x 就可以了
这一次就比较简单粗暴，直接把webpack全部卸载了

npm uninstall webpack webpack-cli webpack-dev-server -D

然后重新安装

npm install webpack webpack-cli webpack-dev-server -D

安装完成后再次运行 npm run dev ，之前的问题没有了，但是出现了新的问题

问题二 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

---

新的问题出现时运行结果如下

解决方案

这个问题倒是挺明显的，直接指出了问题出在 html-webpack-plugin 上，而其GitHub仓库里也有对应的 issue 讨论，查看原文 https://github.com/jantimon/html-webpack-plugin/issues/841

讨论指出，直接更新或者安装就可以了

npm update html-webpack-plugin -D			// 更新 html-webpack-plugin
npm install html-webpack-plugin --save-dev	// 安装 html-webpack-plugin

注意

在 讨论中有人提到，直接使用npm安装可能出现没有安装最新版本的情况，需要指定版本安装（我就是因为这个原因导致反反复复安装了很多遍都不行，指定版本之后就可以了）

安装指令

npm install html-webpack-plugin@3.2.0 --save-dev

再次 npm run dev 运行后，问题成功解决

问题三 TypeError: Cannot read property ‘eslint’ of undefined

---

可能是真的有点背，问题一个接一个的来[心累]，还是先来一个问题图

解决方案一：修改webpack.dev.conf.js

这个问题是在webpack的issue中得到了解答，并给出了解决方案
查看原文 https://github.com/webpack/webpack/issues/6556

问题原因：

@sokra: 似乎 eslint-loader 在尝试访问 this.option 中已经删除的部分（Webpack4）
@hanxue: 可以把下列代码添加到 webpack.dev.conf.js 中，使 ESLint 在Webpack 4 中正常运行

添加的代码如下

mode: "development",
  plugins: [
    new webpack.LoaderOptionsPlugin({ options: {} }),

解决方案二：安装更高版本的 eslint-loader

这个问题在 eslint-loader 的仓库中也被提了出来，并得到了解答
查看原文 https://github.com/webpack-contrib/eslint-loader/issues/215

在 eslint-loader 2.0.0 版本中这个问题已得到修复

因此我们只需要安装新版本的 eslint-loader 就可以了

安装指令：

npm install eslint-loader@2.1.2 --save-dev

问题四 TypeError: Cannot read property ‘vue’ of undefined

---

我还能说什么，当然是继续喽

查询发现，该问题是vue-loader和webpack 不兼容导致的

原因 vue loader和webpack不兼容
查看原文

有了前面的经验，直接尝试安装最新版的 vue-loader
使用 npm install vue-loader@latest --save-dev 安装了 vue-loader@15.7.1 版本，运行直接报了一大堆错，显然，最新版本不行。

解决方案

于是看了一下我当前 webpack 版本 是 webpack@4.41.2，发现有人在 webpack@4.5.0,vue-loader@14.2.2 版本下运行正常

亲测如果是webpack@4.5.0,vue-loader@14.2.2.其他版本基本全部报错,真是坑!
查看原文

于是卸载了之前的版本尝试安装 vue-loader@14.2.2

npm install vue-loader@14.2.2 --save-dev

随后 npm run dev 运行，终于见到了久违的 DONE Compiled successfully

总结

---

版本升级涉及到的包太多，轻易不要修改版本，确实需要升级的时候，注意把全家桶都带上

我把 Git 工具中展示的这次升级设计到的全部版本变化放在下面，欢迎参考