解决webpack-dev-server实时重新加载不出来问题

最新推荐文章于 2023-12-10 21:30:40 发布
最新推荐文章于 2023-12-10 21:30:40 发布
阅读量845 收藏 1
点赞数
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52959651/article/details/111222578
版权
本文介绍了在遇到webpack-dev-server实时重新加载不成功的问题时，如何进行排查和解决。作者分享了自己遇到的错误情况，包括需要重新运行npm i命令以安装依赖，以及检查并执行npm run serve或npx webpack serve命令。建议遇到类似问题的开发者参考webpack中文网的教程，按照官方步骤操作。
摘要由CSDN通过智能技术生成

解决webpack-dev-server实时重新加载不出来问题

这几天在安装webpack-dev-server时，出现一些问题，前一天webpack-dev-server运行成功，关闭电脑后，后一天再运行其他命令，发现会报各种各样的错误，下面是我针对自己出现的问题的解决方法。
（我的报错是因为我直接运行其他命令，没有将之前的命令重新运行一遍，导致之前的没有运行出来，所以一直报错）
在vs code终端里运行以下命令
1：执行npm i命令，重新运行
在这里插入图片描述
如果第一个命令出错，可能的你的代码内部出现了问题，可以去webpack中文网查看。
webpack中文网
2：执行npm run serve命令
在这里插入图片描述

serve是package.json里的命令（很重要）

最低0.47元/天 解锁文章
熊抱抱的一粒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack-dev-server删除dist目录，图片不显示
weixin_38289787的博客
08-11 593
不是问题的问题哇擦本质参考感谢点赞 哇擦 配置 webpack-dev-server 不就是为了提高开发效率（懒），然后图片在火狐浏览器竟然显示不出来。一看我滴个亲娘勒，好家伙把我打包后生成的 dist 目录删了就不重新打包了（因为之前配置了clean-webpack-plugin插件，它的作用就是在打包之前把 dist 目录删除掉）？ 本质 好吧，在浏览器上搜了一圈，也没得到解决办法????。最后用 Chrome 找到 segmentfault社区才发现 使用webpack-dev-server是不会生成
webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）
weixin_30615767的博客
02-17 774
跟着Webpack傻瓜式指南（一）这个教程在安装webpack和webpack-dev-server的时候遇到很多问题，查了很多终于一一找到解决办法。 主要参考了这三篇博文： 　　moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 　　创建Webpack简单项...
Webpack dev server热加载失败的解决办法
甘焕的博客
05-10 9703
利用Webpack dev server作为热加载服务器时，出现以下错误：XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested res
安装 webpack-dev-server 时因网络原因一直报错
qq_52613072的博客
12-10 611
因为npm的服务器在国外，通过npm下载插件经常会出现下载缓慢或者报错的问题；图上的报错原因就是如此；按照上述操作下载好 cnpm 后，用 cnpm 来下载各种软件包——换用镜像的国内的 cnpm 进行下载；
使用NPM配置React环境及Webpack热加载
liangzelei的博客
08-28 509
（需要本机具有NodeJS环境） 1.创建项目文件夹 2.初始化项目 打开命令行，定位到所创建的目录下，执行 "npm init" 命令后根据提示输入，如下图： 3.安装依赖 在命令行执行入下命令： npm install -g --save react react-dom babelify webpack webpack-dev-server npm instal
使用webpack-dev-server处理跨域请求的方法
08-27
webpack-dev-server是webpack的一个插件，它可以用来创建一个开发服务器，以便在开发过程中实时预览和热加载项目。同时，它也可以用来代理跨域请求。 使用webpack-dev-server处理跨域请求的方法非常简单。首先，...
react-webpack-HMR-middleware:通过webpack-dev-middleware和webpack-hot-middleware对热模块重新加载做出React
05-07
尽可能的简化安装, 选择 webpack-dev-server CLI.如果想要使用a task runner类似于grunt 或 gulp, 选择 webpack-dev-server API.如果想要使用你自己的node脚本来运行webpack, 选择 webpack-dev-server API.已经使用...
浅谈webpack-dev-server的配置和使用
08-27
webpack-dev-server是webpack的一个开发服务器插件，能够提供实时重新加载的功能，让开发人员可以实时预览代码的变化。使用webpack-dev-server可以大大提高开发效率。 二、安装webpack-dev-server 首先，需要安装...
vue项目中的webpack-dev-sever配置方法
08-28
打开`vue.config.js` ，并设置`devServer` 对象来配置`webpack-dev-server`。例如： ```javascript module.exports = { devServer: { host: '0.0.0.0', // 默认是'localhost'，改为此允许所有IP访问 port: ...
详解webpack-dev-server的简单使用
12-04
- **inline模式**：需要在webpack配置中启用`devServer.inline: true`，或在命令行中添加`--inline`。在HTML文件中引入`webpack-dev-server/client?http://localhost:8080/`，以实现实时刷新。如果使用Node.js API...
npm run serve一直加载不出来
weixin_44932349的博客
04-11 1764
npm run serve一直加载不出来 加载不完也不报错一直停留在47%~52%之间 原因：在vue组件中的template没有添加div
npm run build后网页加载不出来或者icon图标不显示
weixin_49166082的博客
11-17 207
修改 build/utils.js 中的代码，加入 publicPath: '../../'，注意在上一行加一个“，”项目中找到config/index.js文件，将assetPublicPath的路径改为“./”。npm run build后网页一直加载但不显示页面。如果上一步修改后icon图标不显示了。
解决:webpack中使用devServer无法自动刷新浏览器页面,无法热加载
m0_46240646的博客
05-01 647
webpack中使用devServer无法自动刷新浏览器页面,无法热加载 个人认为是版本问题,下面是我的版本 "webpack": "^5.36.1", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2" 解决方案,修改webpack.config.js的配置如下: devServer: { contentBase: resolve(__dirname, 'build'), compress: true,
vue3运行npm run serve无反应，选择跳转后会自动跳入文件路径中
a2986467829的博客
09-13 1542
今天在学习vue3的时候遇到一个问题，就是执行npm run serve的时候没有任何提示直接结束，也不报错去浏览器输入本地8080端口也进不去。有点困扰，上网找了些答案都是运行报错给予的答案与我所遇到的格格不入，所以我就从文件看起，进到跳转的。文件地址，搜索发现这个npm文件是个空壳，然后他每次执行都会去Systeam.32中的这个方法，他会先执行npm这个空文件夹所以我把他删除了，就正常了。
webpack打包常见问题（webpack-dev-server）
无简介！！
08-30 2268
webpack使用 容易遇到的问题！
Vue webpack报错：npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
秋叶原的黑猫的博客
09-30 3013
报如下错误： INFO Starting development server... ERROR ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties 一般
vue 启动项目时报错 ValidationError: webpack Dev Server Invalid Options
热门推荐
csdn_chengpeng的博客
05-07 3万+
如果vue 启动项目时出现报错信息：ValidationError: webpack Dev Server Invalid Options 解决的方法： 找到 config.js 文件 修改一下里面的内容 找到 devServer 将里面的proxy注释掉就可以了 ...
vue-li问题记录
蒋劲豪的博客
06-20 269
大概是package.json或者是vue.config.js文件出现类问题，我把这两行注释掉后，问题解决。
解决webpack-dev-server端口搭建成功，却无法在浏览器访问问题
weixin_42750758的博客
06-22 1105
采用webpack-dev-server插件自动打包构建项目时，当访问http://localhost:8080/时，出现错误
Error: Cannot find module '\webpack-dev-server\bin\webpack-dev-server.js'
最新发布
03-08
这个错误是由于找不到webpack-dev-server模块引起的。webpack-dev-server是一个用于开发环境的轻量级服务器，用于实时重新加载和热模块替换。当你在命令行中运行webpack-dev-server时，它会尝试在node_modules目录下查找webpack-dev-server模块，如果找不到就会报错。 解决这个问题的方法有几种： 1. 确保你已经在项目中安装了webpack-dev-server模块。可以通过运行`npm install webpack-dev-server --save-dev`来安装。 2. 检查你的项目中是否存在node_modules目录，并且其中是否包含webpack-dev-server模块。如果不存在，可以尝试删除package-lock.json文件，并重新运行`npm install`来重新安装依赖。 3. 如果你是全局安装了webpack-dev-server，可以尝试使用`npx webpack-dev-server`来运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值