webpack和webpack-dev-server安装配置遇到的大坑（使用npm run dev命令启用报错）

最新推荐文章于 2024-06-26 16:25:11 发布
原创 最新推荐文章于 2024-06-26 16:25:11 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了在配置webpack和webpack-dev-server时遇到的版本不兼容问题及解决过程。作者通过卸载并重新安装指定版本的webpack-dev-server解决了打包配置时的错误。

今天在学习webpack和webpack-dev-server的安装配置时，对项目进行打包配置 发现了一个坑

首先使用命令 npm i webpack -D下载webpack

然后使用命令npm i webpack-dev-server -D下载webpack-dev-server

在package.json文件中配置

使用npm run dev命令启用报错

经过各种查资料发现是版本不兼容的问题，

解决方案是更改webpack和webpack-dev-server的安装版本

首先把之前安装的webpack-dev-server卸载 （全局的和项目中的都卸载）

重新安装指定版本的

 

webpack和webpack-dev-server的版本对应关系

webpack-使用webpack-dev-server.rar
04-12
要使用 `webpack-dev-server`，首先需要安装它作为项目的开发依赖： ```bash npm install --save-dev webpack-dev-server ``` 然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript ...
使用webpack3.0配置webpack-dev-server教程
08-27
本文主要介绍了使用webpack3.0配置webpack-dev-server的教程，包括安装webpack-dev-server、配置webpack-dev-server和热模块替换等内容。通过本教程，读者可以快速搭建一个小型的服务器，提高开发效率和体验。
安装webpack-dev-server 后执行npm run dev报错
muyejiang的博客
11-11 1026
报错如下： 无法加载webpack-cli 之前安装的是4.7.2版本的，于是重新安装了一遍，仍然报错 解决：不带版本号重新安装，运行成功！
npm install 失败（webpack-dev-server安装失败）
ANNENBERG的博客
02-17 4245
安装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安装错误
weixin_53376443的博客
03-02 1673
webpack-dev-server按照官网进行配置出现错误：Class constructor ServeCommand cannot be invoked without 'new’的解决办法 在进行webpack-dev-server安装时，我们可以按照webpack官网进行配置package.json 但按照官网配置时，有时会出现以下错误 这时我们可以将package.json中"dev":"webpack serve --open"修改成 就可以解决了 ...
webpack-dev-serve依赖报错
航仔的博客
06-26 190
然后执行：npm install webpack-dev-server --save-dev --force。先卸载node_modules文件。
webpack-dev-server 安装中出现的问题
weixin_44684357的博客
11-01 772
webpack-dev-server 依赖于webpack，所以安装的时候对webpack和webpack-cli版本有一定要求 1， cnpm i webpack-dev-server -D 2， 查看warning提示，指定的webpack版本进行安装 cnpm i webpack@XXXX -D 3， 在 webpack.json scripts中添加 scripts:{"dev": "webpack-dev-server"} 4， 执行 npm run dev 可能出现的错误：解决：1，删除nod
自动打包插件webpack-dev-server的安装、配置及使用
01-08
1、介绍： ...在项目中本地安装的webpack-dev-server无法作为脚本命令直接运行 因此 需在package.json中进行配置： 3、使用： 配置之后 输入npm run dev运行 默认启动在8080端口： 注：webpack-dev-
浅谈webpack-dev-server的配置和使用
08-27
浅谈webpack-dev-server的配置和使用 本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，下面将详细说明标题和描述中所说的知识点。 一、webpack-dev-server简介 webpack-dev-server是webpack的一个开发...
安装 webpack-dev-server 时因网络原因一直报错
qq_52613072的博客
12-10 900
因为npm的服务器在国外，通过npm下载插件经常会出现下载缓慢或者报错的问题；图上的报错原因就是如此；按照上述操作下载好 cnpm 后，用 cnpm 来下载各种软件包——换用镜像的国内的 cnpm 进行下载；
webpack-dev-server工具的安装和使用出现的错误解决
qq_45192089的博客
04-04 2807
（1）首先，安装 npm install webpack-dev-server -D //（添加到依赖中） （2） 在package.json文件中添加一条语句：因为是本地安装，所以不能直接把webpack-dev-server当做命令使用 （3）在终端输入：npm run dev，出现错误如下 如何解决的：webpack-cli版本太高，卸载，重新安装一个低版本的 （4）再次运行：npm run dev,出现错误如下： 解决方案： （4）再次运行：npm run dev，终于ok了：
webpack安装 webpack-dev-server后运行报错
qq_44696583的博客
12-12 2943
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
加速安装配置webpack-dev-server插件，报错 `Unable to load ‘@webpack-cli/serve‘ command`修正
m0_47794838的博客
01-12 697
安装配置webpack-dev-server插件
【webpack】DevServer运行时webpack-dev-server插件报错：Cannot find module ‘webpack-cli/bin/config-yargs
这道题我不会做...不会做啊..太难了！！
05-13 530
文章目录前言原因解决方法 前言 使用webpack的开发服务器(DevServer)进行热部署时，运行npx webpack-dev-server命令时，运行报错了 原因 本地默认安装的新版webpack5与相关协作的功能包并不兼容 解决方法 因为不想回退webpack版本，所以就查阅官方文档，发现最新的运行命令为：npx webpack serve ...
Mac使用npm安装webpack-dev-server出现问题
WihauShe's Blogger
07-14 1201
缘由     个人在学习vue时搭建webpack项目需要安装webpack-dev-server，使用命令npm i webpack-dev-server出现了以下问题： 解决方法     实际上因为Mac升级到High sierra 后，使用命令行工具安装某些组件是缺少xcode的命令行工具的，使用命令sudo xcode-select --install，再输入密码进行安装。安装完成后再安装webpack服务器组件。结果
webpack --- webpack和webpack-dev-server众问题
bylifan的博客
08-13 1947
报错信息： peerDependencies WARNING webpack-dev-server@^2.9.7 requires a peer of webpack@^2.2.0 || ^3.0.0 but webpack@4.39.1 was installed peerDependencies WARNING webpack-dev-server@2.11.5 › webpack-dev...
webpack-dev-server搭建步骤及错误报告
SCU软件学院篮球队19级队长的博客
06-11 1668
构建步骤 新建文件夹 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学习笔记-6-webpack-dev-server
qq_38652603的博客
06-28 2015
简要介绍了webpack-dev-server进行本地调试的过程
webpack-dev-server 使用
cjexe的博客
08-18 397
Step1 安装 npm i webpack-dev-server npm i cross-env Step2 配置 要判断下，这个webpack的配置是要同时跑在开发环境和生产环境的，所以需要一个变量区分下 package.json 加 dev NODE_ENV=production 适用于 Mac平台上 set NODE_ENV=production 适用于win平台下 这个cross-e...
npm i webpack webpack-cli webpack-dev-server -D
最新发布
03-27
嗯，用户想安装Webpack、webpack-cli和webpack-dev-server作为开发依赖。他们可能遇到了版本兼容的问题，因为引用里提到过版本不兼容时需要卸载重装。首先，我需要确定正确的安装命令，并且确保版本兼容。 根据引用...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值