Vue启动报错 Cannot find module 'webpack/bin/config-yargs'

项目背景是 使用Vue开发SPA单页面应用

鳖废话，先上错误

Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\my\react-task\node_modules\webpack-dev-server\bin\webpack-dev-server.js:24:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
......
复制代码

好吧，我认为除了最上面这句，下面的信息都可以先放到一边（绝对不是因为我看不懂才用省略号代替的）.

碰到错误怎么办，搜索引擎走一走，走马观花看了一圈（为了先解决问题），当然错误最后是解决了的。

错误原因

这个错误是在项目启动的时候冒出来的。在报错之前我在命令提示符里瞎操作了一通，现在都忘了当时干了什么了，反正最后的结果就是报了上面那个错，这里给自已一个'啪啪啪'。

根据我在网上看到的，有两种说法：

一种说是webpack 和 webpack-dev-server版本不匹配

另一种是webpack4之后，将config-yargs放到了webpack-cli里面去了

怎么看它们的版本呢？项目根目录下有一个package.json文件，里面放了项目的描述和导入的依赖包描述，然后有一个devDependencies属性，在这里面就可以看到上面三个模板依赖的版本 。

以下是我的（版本更改后的）：

"webpack": "^3.8.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.7",
复制代码

解决方案

先打开cmd，定位到你本地的项目下，然后可以尝试两种解决方案

1. webpack 版本在 4 以上时

   安装 webpack-cli，然后更新

npm install webpack-cli -D
npm update
复制代码

我当时版本就是 4 点几，然后执行了上面的操作，结果发现 webpack-cli 是没下成功还是咋地，反正还是启动失败。

嗯哼，没关系，我还能撑。

2. 修改webpack和webpack-dev-server版本

   先删后改，卸载之后安装指定版本

//卸载版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
//安装指定版本
cnpm install webpack@3.8.0 --save-dev
cnpm install webpack-dev-server@2.9.7 --save-dev
复制代码

（不要纠结 -g 在前在后，据我实验无所谓。）

这上面两个版本是不冲突的（貌似webpack3 和 webpack-dev-server2次要版本高一点的 都还匹配，我没试过，猜的）。

当然，如果到此时你还是报错，嗯嗯嗯~。

把node_modules（在项目根目录下）删了吧，重装。

删除文件夹，在cmd中输入 nmp install。

要是再搞不定，咳咳，那要不就别搞单页面应用了吧。

over over over