webpack踩坑一：webpack-dev-server启动报错

最新推荐文章于 2024-05-12 21:27:07 发布
最新推荐文章于 2024-05-12 21:27:07 发布
阅读量1.3k 收藏
点赞数
分类专栏： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyoung/article/details/116482426
版权

webpack

问题：启动webpack-dev-server的时候报错在这里插入图片描述
此前已经全局安装过了，继续安装，再启动webpack-dev-server报错
在这里插入图片描述
解决方法：
webpack和webpack-cli 版本不一致，降低webpack-cli版本，重新指定版本安装webpack-cli
在这里插入图片描述
启动webpack-dev-serve，成功打开。
附上我的包版本
在这里插入图片描述

i'm cool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-dev-server配置失败的原因
a125129167的博客
06-24 3626
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。 主要提供了2个功能： 为静态文件提供服务 自动刷新和热替换(HMR) 一般的项目文件结构为: |--src | |--views | |--index.js | |--module_a | |--list.js | |--module_b
webpack devServer启动后报错 “Cannot GET /xxx“ 解决办法
liuxingyu_1的博客
09-09 2164
问题背景 在开发一个后台项目的过程中，其 publicPath 前缀为 /admin，然后用 webpack devServer 启动的时候，访问二级目录 /admin/tasks 的时候报了如下错误: "catnot get /admin/tasks"
抽丝剥茧：详述一次DevServer Proxy配置无效问题的细致排查过程
最新发布
hello ice cream
05-12 1358
事情的起因是这样的，在一个已上线的项目中，其中一个包含登录和获取菜单的接口因响应时间较长，后端让我尝试未经服务转发的另一域名下的新接口，旧接口允许跨域请求，但新接口不允许本地访问（只允许发布测试/生产的域名访问）。
webpack index.html空白,javascript – 为什么React Webpack生产版本显示空白页面？
weixin_32367041的博客
06-28 304
我正在构建一个反应应用程序,目前webpack-dev-server工作正常(hello world文本显示),但webpack -p显示空白页面.对于生成版本,chrome dev工具下的网络选项卡显示index.html和index_bundle.js的大小为0 B(见图片)但显然并非如此.HTML文件大小为227 B& index_bundle.js文件大小为195Kb(见图)此外,...
webpack开发服务器-webpack-dev-server
qq_38888512的博客
03-17 210
webpack-dev-server的作用 webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载修改的内容。 安装： npm install --save-dev webpack-dev-server webpack.config.js module.exports = { + devServer: { + contentBase: './dist' + }, }; package.json "scripts": { + ...
启动webpack-dev-server报 Cannot find module ‘webpack‘
lyy180236的博客
04-09 3079
启动webpack-dev-server 1、错误展示 2、项目依赖包 解决过程 1、暴力卸载关于webpack相关依赖包再install(行不通)，报以下错误 2、根据全局安装路径找到webpack-dev-server.js修改 路径报错，失败告终 3、卸载webpack-dev-server全局安装再重新安装，使用webpack serve启动 ...
web-webpack-plugin：替代html-webpack-plugin
02-03
npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-webpack-plugin' ) ; 特征 输出html文件 webpack配置 module . exports = { entry : { A : './a' , B : './b' , ...
webpack-使用webpack-dev-server.rar
04-12
`webpack-dev-server` 是 Webpack 提供的一个本地开发服务器，它极大地提高了前端开发效率，因为它提供了实时重载（live reloading）和热模块替换（hot module replacement）等功能。 **实时重载（Live Reloading）...
write-file-webpack-plugin：强制webpack-dev-server将捆绑文件写入文件系统
02-26
写文件webpack插件 强制webpack-dev-server程序将捆绑文件写入文件系统。 当使用程序而不是时，此插件无效。安装npm install write-file-webpack-plugin --save-devAPI /** * @typedef {Object} options * @property...
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：...
使用webpack3.0配置webpack-dev-server教程
08-27
本文主要介绍使用webpack3.0配置webpack-dev-server的教程，旨在帮助读者快速搭建一个小型的服务器。下面我们将详细介绍webpack-dev-server的配置和原理。 一、webpack-dev-server简介 webpack-dev-server是一个...
webpack dev-server 配置
EmotionComputer
08-29 6643
webpack dev-server
解决webpack-dev-server由于网络问题出现ETIMEDOUT
lwenwei的博客
10-27 1847
解决webpack-dev-server由于网络问题出现ETIMEDOUT
webpack之devServer配置
热门推荐
coding...
05-05 15万+
DevServer 是webpack开发服务器。首先，下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json：配置webpack.config.js当运行npm run dev的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。webpack-dev-server其它配置devServer...
前端知识17:配置开发服务器devServer
weixin_41380194的博客
01-15 2946
devServer给我们提供了开发过程中的服务器，是一个使用了express的http服务器，他的主要作用就是为了监听资源文件的改变，该服务器的client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-servier就会实时的进行编译。 只会在内存中编译，不会有任何的输出，下载weback-dev-server包 webpack-dev-server 并不能读取你的webpack.config.js的配置output 启动devserver指令为np webpack ser
webpack--开发环境(devserver)
cjx177187的博客
08-26 525
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用webpack 提供的API改变 webpack 的运行结果。4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。3、确定入口：根据配置中的 entry 找出所有的入口文件。...
webpack -- webpack-dev-server 启动报错解决
weixin_44622984的博客
12-29 1288
今天在启动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-dev-server运行报错的解决方案
ccss__ddnn的博客
12-06 1844
话不多说，直接上图 网上找到的方法： 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 但是依然报错。 后来找到原因：webp
webpack运行报错 webpack-dev-server.... 解决方法
sunshime的博客
07-31 5492
报错情况： The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using y...
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
08-24
这个命令使用了webpack-dev-server来启动一个本地开发服务器，用于实时编译和热重载。--inline选项将webpack的构建消息和编译错误显示在浏览器中，--progress选项显示编译进度条，--config选项指定了webpack的配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值