webpack-dev-server运行报错的解决方案

最新推荐文章于 2024-07-14 15:41:52 发布
原创 最新推荐文章于 2024-07-14 15:41:52 发布 · 2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文介绍了解决因Webpack及其相关CLI工具版本不一致导致的问题的方法。通过卸载并重新指定版本安装Webpack、Webpack-CLI及Webpack-Dev-Server，确保版本一致性，从而避免运行错误。

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

话不多说，直接上图

网上找到的方法：

1、删除node_modules文件夹和package-lock.json文件，然后npm install

2、卸载webpack webpacl-cli webpack-dev-server，重新安装

npm uninstall webpack webpack-cli webpack-dev-server

npm install webpack webpack-cli webpack-dev-server -D

但是依然报错。

后来找到原因：webpack、webpack-cli和webpack-dev-server版本不一致导致

指定安装版本即可，具体如下：

npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D

安装完毕，即可愉快的npm run dev了

 

运行webpack-dev-server报错
ChrisJin的博客
07-21 610
项目场景： package.json依赖： 问题描述： 运行webpack-dev-sever报如下错误： Cannot find module 'webpack-cli/bin/config-yargs' 解决方案： 百度之后都是说webpack-cli 4.x与webpack-dev-server 3.x版本不兼容。需要将webpack-cli 4.x降低到webpack-cli 3.x 方案一 解决方案如下： 卸载webpack-cli 4.7.2, 安装webpack 3.3.12（3.X最高
【webpack5】webpack-dev-server 不能正常启动
小笼包不是包的博客
01-29 3163
【webpack5】webpack-dev-server 不能正常启动 一、问题 webpack-dev-server --open --config script/webpack.dev.js webpack4环境下可以正常启动，但是升级webpack5后依赖都要升级，再跑这个指令就会报错： internal/modules/cjs/loader.js:584 throw err; ^ Error: Cannot find module 'webpack-cli/bin/confi
关于webpack配置webpack-dev-server 报错问题。Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_40922656的博客
04-14 548
配置情况 自动编译并运行，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行 安装 loader； npm install webpack-dev-server --save-dev webpack配置文件； 添加 devServer 服务后需要调整输出的路径 publicPath: ‘/’ 增加 devServer 配置 devServer: { open: true, // 自动打开浏览器 compress: true, // 启动gz
webpack-dev-server报错
一只大桃子
03-10 1834
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 2898
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
解决webpack-dev-server实时重新加载不出来问题
qq_52959651的博客
12-15 930
解决webpack-dev-server实时重新加载不出来问题 这几天在安装webpack-dev-server时，出现一些问题，前一天webpack-dev-server运行成功，关闭电脑后，后一天再运行其他命令，发现会报各种各样的错误，下面是我针对自己出现的问题的解决方法。 （我的报错是因为我直接运行其他命令，没有将之前的命令重新运行一遍，导致之前的没有运行出来，所以一直报错） 在vs code终端里运行以下命令 1：执行npm i命令，重新运行 如果第一个命令出错，可能的你的代码内部出现了问题，可以
webpack（10）webpack-dev-server搭建本地服务器
厦门在乎科技
07-13 353
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果 由于它是个单独的模块，使用之前，我们需要先安装，命令如下： npm install -D
AJ-Report前端启动报错'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
03-08
例如，降低`webpack-cli`版本可能是一个有效的解决方案[^2]。 #### 方法四：处理潜在的插件冲突 某些情况下，特定版本范围内的第三方库可能会与其他工具产生冲突。比如html-webpack-plugin的不同版本之间就曾有过...
报错‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
wzg0817的博客
07-29 1万+
—文章首发— 在我们初始化Vue项目的时候，有时候会碰到’webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方案： 方案一：看看自己的项目里面是否有node_modules文件夹， 1、如果没有就尝试执行npm install,这是因为缺少依赖包。 2、如果有就将这个node_modules文件夹删掉，重新执行npm install，等待安装完之后，再次运行“npm run dev”，有些人的是马上就可以了，然而往往还会有人（譬如我）仍然报类似的错误，.
vue启动项目时，报错webpack-dev-server不是内部命令也不是可运行的程序
qq_65325528的博客
07-14 435
使用vue的webpack启动项目时，报错webpack-dev-server不是内部命令也不是可运行的程序，看百度这是因为webpack的bug。
Webpack中使用webpack-dev-server配置错误
smile14796的博客
09-28 352
在启用webpack-dev-server的时候报配置错误 查看配置 发现一个很无语的语法错误 修改为port即可
彻底解决webapck-dev-server的报错问题
weixin_43405946的博客
12-23 2509
webpack中的webpack-dev-server报错的根源是webpack和webpack-cli版本问题，一开始我安装的时候没有设置版本，就一直报错，之后我重新开了一个文件，重新下载webpack 和 webpack-cli npm install webpack@5 webpack-cli@3 -D npm install webpack-dev-server -D npx webpack-dev-server 然后启动成功了 ...
Vue项目碰到"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件"报错
热门推荐
lon_01的博客
01-30 8万+
最近公司里做vue项目，svn了前端同事的项目代码，装好环境，运行项目（安装步骤随便百度一下，很详细），控制台里报错“‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件，随机百度解决方法，有的说需要重新装依赖包，有的说扩展用户权限，都做了，但是报错依旧。 随机自己新建一个vue项目（https://segmentfault.com/a/119000
安装 webpack-dev-server 时因网络原因一直报错
qq_52613072的博客
12-10 835
因为npm的服务器在国外，通过npm下载插件经常会出现下载缓慢或者报错的问题；图上的报错原因就是如此；按照上述操作下载好 cnpm 后，用 cnpm 来下载各种软件包——换用镜像的国内的 cnpm 进行下载；
【BUG】‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
东方神剑
01-15 8220
【BUG】'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。
项目npm install报错。webpack-dev-server 不是内部或外部命令,也不是可运行的程序 或批处理文件。
lianjian6534的博客
04-06 596
本人是使用npm的新手，在初次使用npm安装下载依赖时遇到如下问题，记录一下。 1，npm在下执行npm install,npm run start,npm run dev时一直报错如下。 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 1，尝试更换国内镜像地址，没解决问题。 2，尝试使用cnpm,没解决问题 2，然后删除node_modules文件夹，重新运行命令npm install，报如下错误 webpack-cli@3.3.12" has incorre
npm install webpack-dev-server报错Unable to load ‘@webpack-cli/serve‘ command
weixin_50680057的博客
10-15 2466
需要实现trl+s时打包文件自动刷新
npm install 失败（webpack-dev-server安装失败）
ANNENBERG的博客
02-17 4221
安装webpack-dev-server失败, 安装cnpm也失败，报npm err的错 配置环境时，npm install一直遇到同一个错误： npm ERR! code Z_BUF_ERROR npm ERR! errno -5 npm ERR! unexpected end of file 检查了下log，发现npm在获取patternfly依赖包元数据的时候总是会遭遇不可预料的文...
webpack-dev-server:permission denied
最新发布
07-11
在使用 `webpack-dev-server` 时遇到的 **"permission denied"** 错误通常与文件系统权限、全局安装路径或运行环境有关。以下是几种可能的原因及解决方案： ### 1. 权限不足导致无法写入全局安装目录 当尝试全局安装 `webpack-dev-server` 或其依赖项时，如果当前用户没有对全局安装目录（如 `/usr/local/lib/node_modules/`）的写权限，会报错 `Error: EACCES: permission denied`。 #### 解决方法： - 使用 `sudo` 提升权限进行安装： ```bash sudo npm install -g webpack-dev-server ``` - 或者配置 npm 的全局安装路径到当前用户的目录下，避免权限问题： ```bash mkdir ~/.npm-global npm config set prefix '~/.npm-global' ``` 然后将以下行添加到 `~/.bashrc` 或 `~/.zshrc` 文件中： ```bash export PATH=~/.npm-global/bin:$PATH ``` 最后重新加载配置文件： ```bash source ~/.bashrc # 或 source ~/.zshrc ``` ### 2. 项目目录权限问题 如果 `webpack-dev-server` 在启动时尝试写入某些目录（如临时目录、缓存目录）而当前用户无写权限，也可能引发此错误。 #### 解决方法： - 检查项目所在目录及其子目录的权限设置，确保当前用户拥有读写权限。 - 可以通过以下命令修改目录权限： ```bash sudo chown -R $USER /path/to/project chmod -R 755 /path/to/project ``` ### 3. 使用 `cnpm` 安装时的权限问题 如果使用的是淘宝镜像 `cnpm`，也可能会因权限问题导致安装失败。例如，在全局安装过程中出现 `mkdir '/usr/local/lib/node_modules/xxx_tmp'` 报错。 #### 解决方法： - 同样可以使用 `sudo` 提升权限进行安装： ```bash sudo cnpm install -g webpack-dev-server ``` ### 4. Node.js 运行时权限过高 有时开发者习惯性使用 `sudo` 执行 `webpack-dev-server`，这可能导致生成的文件归属 root 用户，后续操作需要更高权限。 #### 解决方法： - 避免使用 `sudo` 执行开发服务器命令： ```bash webpack serve --mode development ``` - 若已有文件被 root 占有，需手动更改文件所有者： ```bash sudo chown -R $USER . ``` ### 5. 使用 Docker 容器化开发环境 为避免本地权限和依赖冲突问题，推荐使用 Docker 容器化开发环境。 #### 示例 Dockerfile： ```dockerfile FROM node:18 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 8080 CMD ["npx", "webpack serve --mode development"] ``` 构建并运行容器： ```bash docker build -t my-webpack-app . docker run -p 8080:8080 -v $(pwd):/app my-webpack-app ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值