webpack webpack-dev-serve 报错处理

最新推荐文章于 2024-05-08 18:12:23 发布
最新推荐文章于 2024-05-08 18:12:23 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c_liufeng/article/details/110385130
当遇到'Cannot find module 'webpack-cli/bin/config-yargs''错误时，通常是由于webpack及其相关依赖版本不匹配导致。解决方法是先卸载现有包，再重新安装指定版本的webpack（4.17.1）、webpack-cli（3.3.9）和webpack-dev-server（3.8.2）。这有助于确保所有组件的兼容性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误情况：
Cannot find module 'webpack-cli/bin/config-yargs'
错误分析：

出现这种情况一般是因为webpck与webpack-dev-serve版本不兼容引起的错误。

解决方案：

  1. 运行 npm uninstall webpck webpack-dev-server webpck-cli -D先删除架包，之后运行npm install webpack webpck-dev-server webpack-cli -D 重新安装架包。（如果此方法无用，建议寻找兼容的版本直接安装架包）
  2. 直接安装此版本架包
    "webpack": "^4.17.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
webpack-dev-server的安装
周家大小姐
03-16 2万+
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时. 注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它. 发现报错了;原因是...
Vue学习：webpack-dev-server和nginx问答
热门推荐
百锦再的博客
04-22 7万+
这在大多数情况下是可行的，但如果你的后端服务器对请求的 Origin 属性有严格的检查，或者你需要代理到不同的域，那么你就需要设置 changeOrigin 为 true。当 changeOrigin 设置为 true 时，如果原始请求中的 Origin 是 http://localhost:8080，那么在代理请求中，Origin 会被修改为 https://api.example.com。需要注意的是，pathRewrite 的配置应该根据你的实际后端API路径和你想要的前端请求路径来设置。
webpack自动打包webpack serve 配置后出现的bug
WE8395的博客
08-27 279
【代码】【无标题】
webpack-dev-server报错
一只大桃子
03-10 1841
webpack-dev-server报错 版本 "webpack": "^5.69.1", "webpack-dev-server": "^4.7.4", package.json "scripts": { "start": "webpack serve --open" } webpack.config.js配置文件 devServer: { static: './dist', }, 运行 npm start 报错： 降低webpack-dev-server版本
webpack安装 webpack-dev-server后运行报错
qq_44696583的博客
12-12 2901
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs‘)
超悠閒的博客
06-16 1万+
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs’) 文章目录Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module 'webpack-cli/bin/config-yargs')前言正文项目背景问题描述解决方案方案 1：使用新命令 webpack serve(推荐)方案 2：降低 webpa
vue项目中的webpack-dev-sever配置方法
08-28
配置完成后，你可以通过运行`npm run serve` 或者 `yarn serve` 来启动开发服务器，这将会根据`vue.config.js` 中的设置运行`webpack-dev-server`。 6. **访问项目**： 在同一局域网下的其他设备上，通过`...
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server
2401_84619530的博客
05-08 1342
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记Vue 学习笔记。
react项目实践之webpack-dev-serve
10-18
**React项目实践与Webpack Dev Server** 在React项目开发过程中，`webpack-dev-server`是一个不可或缺的工具，它提供了高效且便捷的本地开发环境。这个工具不仅作为一个小型的静态文件服务器，而且具备实时刷新和...
webpack server配置错误
xihuaxi的专栏
09-05 942
webpack工具使用
webpack -- webpack-dev-server 启动报错解决
weixin_44622984的博客
12-29 1457
今天在启动webpack-dev-server的时候报错 报错原因: 搜了一下github和百度,应该是webpack-cli的版本与webpack-dev-server版本的冲突 解决方式: 1.删除已有项目webpack依赖 npm uninstall -D webpack-cli 2.重新安装 npm install -D webpack-cli@3 再次运行: 成功开启服务器 注: 如果按照上述方法仍然报相同错误,可以尝试将webpack webpack-cli webp
解决Webpack报错Unable to load ‘@webpack-cli/serve‘ command
m0_54088431的博客
04-05 8808
在安装webpack自动进行项目打包和构建（webpack-dev-server）， npm i webpack-dev-server@3.11.2 -D 时，出现报错，报错显示内容如下 [webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli] TypeError: options.forEach is not a function 解决步骤： 1.无法加载“@webpack cli/service”命令,
解决webpack报错 Unable to load ‘@webpack-cli/serve‘ command
一个很水的计算机研究生的博客
06-02 1163
解决webpack插件报错 Unable to load '@webpack-cli/serve' command的问题
webpack打包常见报错解决方案
qq_28749759的博客
02-21 1627
学习过程问题总结
成功解决报错Unable to load ‘@webpack-cli/serve‘ command， TypeError: devServerFlags is not iterable
小助手爱编程
10-11 2721
运行yarn serve报错 查看版本webpack -v 提示我用yarn add -D webpack-cli 安装cli 所以运行如下图，成功解决
使用 webpack-dev-server时浏览器页面提示cannot get/
m0_50899128的博客
03-27 3051
使用 webpack-dev-server时浏览器页面提示cannot get/的问题解决
解决webpack5下使用webpack-dev-server报错
peter_hzq的博客
11-13 5789
先说下我使用的版本 "webpack": "^5.4.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" 使用 npx webpack-dev-server 运行会报Error: Cannot find module 'webpack-cli/bin/config-yargs'这样的错误。 解决方法一： webpack-cli的版本降为3.3.12 解决方法二： 使用npx webpack serve这个命令运行。 ...
Webpack中使用webpack-dev-server配置错误
smile14796的博客
09-28 359
在启用webpack-dev-server的时候报配置错误 查看配置 发现一个很无语的语法错误 修改为port即可
webpack-dev-server搭建步骤及错误报告
SCU软件学院篮球队19级队长的博客
06-11 1595
构建步骤 新建文件夹 pnpm add webpack webpack-cli pnpm add html-webpack-plugin pnpm add webpack-dev-server 修改 package.json（If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.） { "scripts": { "build": "webpack", "sta
webpack和webpack-dev-server版本兼容
最新发布
06-15
### Webpack 与 Webpack-Dev-Server 的版本兼容性 Webpack 和 Webpack-Dev-Server 是前端开发中常用的工具组合，用于构建和运行开发服务器。然而，不同版本之间的兼容性问题可能会导致项目无法正常运行。以下是 Webpack 和 Webpack-Dev-Server 的版本兼容性对应关系： #### Webpack 4 对于 Webpack 4，推荐使用 Webpack-Dev-Server 的 3.x 系列版本[^1]。例如： ```bash npm install webpack-dev-server@3 --save-dev ``` #### Webpack 5 Webpack 5 引入了多项改进和变化，因此需要更高版本的 Webpack-Dev-Server 来支持其新特性。以下是推荐的版本对应关系： - Webpack 5 需要至少 Webpack-Dev-Server 4.x 版本[^2]。 - 如果遇到兼容性问题，可以尝试降级到 Webpack-Dev-Server 3.11.2，但这可能不完全支持 Webpack 5 的所有功能[^3]。 安装命令示例： ```bash npm install webpack-dev-server@4 --save-dev ``` #### 具体配置调整 在升级或降级 Webpack-Dev-Server 后，可能需要调整 `package.json` 和 `webpack.config.js` 文件中的配置。以下是一些常见调整： 1. **修改启动脚本**：将 `webpack-dev-server` 替换为 `webpack serve`。 ```json "scripts": { "dev": "webpack serve" } ``` 2. **检查 `webpack.config.js` 配置**：确保 `devServer` 属性正确设置。例如： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devServer: { port: 3000, open: true, contentBase: './dist' } }; ``` #### 注意事项 - 如果使用 Webpack 5 和 Webpack-Dev-Server 4.x，需确保 `devServer` 中的属性名正确，否则可能导致错误[^3]。 - 在某些情况下，可以通过指定浏览器名称解决打开失败的问题，例如 `webpack serve --open Chrome.exe`[^5]。 通过以上方法，可以有效解决 Webpack 和 Webpack-Dev-Server 的版本兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

夜丶陌颜

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

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

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

打赏作者

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

抵扣说明：

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

余额充值