关于webpack配置webpack-dev-server 报错问题。Error: Cannot find module 'webpack-cli/bin/config-yargs'

配置情况

自动编译并运行,每次修改代码都需要重新执行 webpack 命令,可以使用 webpack-dev-server 自动打包运行

安装 loader; npm install webpack-dev-server --save-dev

webpack配置文件;

1. 添加 devServer 服务后需要调整输出的路径

publicPath: '/'

2. 增加 devServer 配置

devServer: {

open: true, // 自动打开浏览器

compress: true, // 启动gzip压缩

port: 3000, // 端口号

quiet:true

},

3. npm需要配置package.json文件中scripts启动选项配置

"dev": "webpack-dev-server " 直接将打包文件在内存中存储,不会生成dist文件

运行:npm run dev

出错现象

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

这个报错是我在安装webpack-dev-server之后命令行使用的时候出现的,

按理这里应该出现我打包完成并且启动服务的,但是却有了报错。

出错原因

查阅了其他人的解决,发现是因为webpack-cli的新版本对webpack-dev-server版本的不兼容,表示很无奈:

之前的版本是

  • node -v —— v12.19.0
  • npm -v —— v6.14.8
  • webpack -v —— "^5.1.3"
  • webpack-cli -v —— "^4.1.0"
  • webpack-dev-server -v —— "^3.11.0"

解决方案

之后降低webpack-cli的版本为 "^3.3.12"

npm i webpack-cli@3.3.12 -D 就ok了