Cannot find module webpack-cli/bin/config-yargs 解决方法

Question

今天创建了一个新项目

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --progress --colors"
  },
  "devDependencies": {
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

然而启动项目时，却报错了：

Error: Cannot find module 'webpack-cli/bin/config-yargs'

frankie@iMac react-ts % yarn start                                                                                                                                                           [14:04:47]
yarn run v1.22.10
$ webpack-dev-server
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/frankie/Desktop/Web/React/react-ts/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/frankie/Desktop/Web/React/react-ts/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/frankie/Desktop/Web/React/react-ts/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

然后搜查了一番，有部分人是删除了 node_modules，重新 install 可以跑起来，但这是不对的。

解决方法应该是：Install the lastest webpack-cli and use webpack serve to run webpack dev server instead webpack-dev-server. #3304

就是说，安装最新的 webpack-cli 并使用 webpack serve 来运行 webpack dev server 而不是 webpack-dev-server。

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack --progress"
  },
  "devDependencies": {
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

改完就能愉快地玩耍了...