完美解决webpack-dev-server报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'

问题描述

在执行webpack-dev-server命令的时候 遇到如下错误：

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- F:\xxx\xxx\xxx\node_modules\[email protected]@webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (F:\xxx\xxx\xxx\node_modules\[email protected]@webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'F:\\xxx\\xxx\\xxx\\node_modules\\[email protected]@webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --open --port 8888 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因

webpack和webpack-dev-server的版本不一致
我的版本是未指定版本时默认的最新版本：

解决方法

卸载当前版本的webpack和webpack-dev-server：

cnpm uninstall webpack -g
cnpm uninstall webpack-dev-server -g

指定版本安装：

cnpm i webpack@3.8.0 -D
cnpm i webpack-dev-server@2.9.7 -D

完美解决：

---