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

本文介绍了如何在更新webpack和webpack-cli后遇到的错误,并详细讲述了如何通过降低webpack-cli版本来修复'Cannot find module 'webpack-cli/bin/config-yargs''的问题,包括配置webpack-dev-server、调整公共路径和启动devServer的过程。

配置情况

自动编译并运行,每次修改代码都需要重新执行 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了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值