快速修复 Vue 启动时找不到 webpack/bin/config-yargs 的错误

Vue启动报错 Cannot find module 'webpack/bin/config-yargs' 的根源在哪里？

好家伙，这个报错估计很多人都有过，我也是，而且不止一次。Cannot find module 'webpack/bin/config-yargs' 是一条npm安装模块失败的报错，之所以说是npm失败，是因为在全局搜索的时候发现是npm相关问题。

当然也可以通过修复 npm 配置来修复这个问题。不过呢，学会几种不同的解决办法总比只会一种强。

事情是这样的，在做项目过程中，或者说在 npm 装完模块以后，有时候需要进行调试或者构建。按理说现在大都使用 webpack 进行打包构建（如果团队项目的话），那么在项目目录下，使用 npm run dev 或者 npm run build 就能够进行构建了。

但是这时候就出现了问题，控制台直接报错 Cannot find module 'webpack/bin/config-yargs'，what？

这个问题并不复杂，错误的意思是 webpack 的 config-yargs 模块找不到，直接去看项目下的 package-lock.json 文件，发现根本就没有config-yargs ，看来是 npm 在安装 webpack 的时候没有安装它，直接进入 node_modules 目录下，发现了 webpack 包，果然没有 config-yargs。

这时候就很容易解决问题了，直接进行全局安装 config-yargs，使用 npm install -g webpack-cli 或者 yarn global add webpack-cli ，然后在项目目录下，或者在项目根目录使用npm install webpack-cli -D 或者 yarn add webpack-cli -D 。

最后再尝试使用 npm run dev 或者 npm run build ，发现问题解决了，webpack 正常运行。

既然是因为 npm 安装失败导致的，那就可以使用 npm update --force 重新安装，当然了也可以使用 yarn 重装，安装成功后问题同样解决。

解决问题后当然要思考一下了，为什么这次能够解决这个问题，或者说这个解决办法是怎么来的呢？

其实前面就说过了，npm安装失败，查找问题原因很简单，就是看一下package.json文件，再看一下node_modules 目录，这就很容易定位到 webpack-cli 这个模块，原因找到了，解决办法自然也就来了。

避免问题的方法也很简单，只需要在安装 webpack 的时候带上 --save-dev 参数，或者在项目中使用 npm install webpack-cli -D 的方式安装，这样就不会出现这种问题了。