使用npm run start 启动webpack-dev-server时报错：

找原因

今天使用npm run start 启动webpack-dev-server时报错：

Error: Cannot find module 'webpack-cli/bin/config-yargs'找不到模块

错误信息显示在，我们的webpack-dev-server/bin/webpack-dev-server.js文件中引入'webpack-cli/bin/config-yargs'找不到。打开webpack-dev-server/bin/webpack-dev-server.js文件找到对应位置

在这里我们可以看到对应不同的webpack-cli版本里，'config-yargs'这个模块的位置是有差异的。然后我们去找一下'webpack-cli'下面的'webpack-cli/bin/config-yargs'这个文件，这个时候我们发现一个大问题。

在我们的webpack-cli的bin目录下只有cli.js根本没有指定的文件。

「终上，我们找到了问题所在，这个文件不存在了」

解决办法

在前面的图片中，我们看到的webpack-dev-server.js文件里面有这么一句代码// webpack-cli@3.3 path : 'webpack-cli/bin/config/config-yargs'，那是不是有可能是版本的问题，查看我的版本

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^5.0.0-alpha.6",
    "style-loader": "^2.0.0",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },

我这里的版本是4.0.0，会不会是最新版的原因，然后我去查了webpack-cli的git仓库，里面并没有有关说明。再去查找webpack-dev-server的git仓库，在Issues里面找到了这个问题的解决办法。git的解决办法链接

根据webpack-dev-server工程师的解答，在webpack-cli v4.0.0版本启动webpack-dev-server,需要使用 webpack serve启动webpack-dev-server

附上我的配置信息：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "start": "webpack serve"
  }

然后就可以使用 npm run start来启动webpack-dev-server了

然后我们就可以访问 http://localhost:8080/ 看到我们的项目了。而且当前的webpack-dev-server支持「热更新」功能。

本文使用 mdnice 排版

webpack-cli v4.0.0启动webpack-dev-server报错

使用npm run start 启动webpack-dev-server时报错：

找原因

解决办法