解决:webpack中使用devServer无法自动刷新浏览器页面,无法热加载

最新推荐文章于 2023-02-21 17:14:28 发布
VIP文章 最新推荐文章于 2023-02-21 17:14:28 发布
阅读量633 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46240646/article/details/116330449
版权

webpack中使用devServer无法自动刷新浏览器页面,无法热加载
个人认为是版本问题,下面是我的版本

"webpack": "^5.36.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"

解决方案,修改webpack.config.js的配置如下:

devServer: {
   
        contentBase: resolve(__dirname
最低0.47元/天 解锁文章
一只Huskie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue开发中在idea中启动npm run dev，项目不刷新页面问题解决实例一则。
06-17 1715
vue页面启动刷新了半天不见动静。原来是另外一个从svn上下载的版本，而在idea里面修改的是当前自己有用的版本，启动和修改的不是一个文件夹下的项目，自然看不到效果
webpack-dev-server自动更新页面方法
11-26
这两天在看webpack，今天卡在webpack-dev-server上了，折腾了一下午，一直无法正常运行，每次服务器也提示正常启动了，但是浏览器一输入localhose:8080/admin就提示Get/…,反正就是无法打开页面。最后找到一个帖子，...
webpack-dev-server的热更新问题
劲枫的博客
01-09 2293
webpack配置如下  目前dist下面的bundle.js是webpack打包的， 但是热更新所引用的bundle.js虽然名字一样，但是并不是看到的那个bundle.js，而是在当前路径下不可见的一个bundle.js 下面实验，证明index.html引用的不是可见的bundle.js 可以看到index.html下面没有bundle.js但是引用成功了  说...
Webpack踩坑——Webpack-dev-server无法自动更新
陈梵的博客
03-23 1751
如下所示，设置了webpack-dev-server后修改html代码页面无法更新，网上搜了一大堆说什么需要设置hot和inline发现都不行，最后发现是因为在package.json中配置了 browserslist字段，删了就可以了。 const HtmlWebpackPlugin = require('html-webpack-plugin'); const { resolve } = require('path'); module.exports = { entry: './src/js/i
解决 webpack-dev-server 不能自动刷新的问题
weixin_33701617的博客
06-21 615
原文发表于我的技术博客 此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。 原文发表于我的技术博客 1. webpack 不能热加载的问题 主要的问题是各个版本之间的兼容性问题，请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件，然后完整删除 node_modules 文件夹后，在项目文件夹下执行 npm install...
webpack-server-dev的编译后页面无法自动更新的问题
weixin_42217229的博客
03-13 437
注意你的页面不是你手动打开的那个页面，是点击这个端口号进去的src页面才可以自动更新，记得要先把index里面的script的src改成/bund
webpack-dev-server-waitpage:Webpack-dev-server的Webpack进度等待页面
04-28
webpack-dev-server-waitpage Webpack Webpack进度等待页面 不用等待webpack完成编译，而可以看到一个不错的进度等待页面。 安装 npm npm install -D webpack-dev-server-waitpage 纱 yarn add -D webpack-dev-...
关于Webpack dev server热加载失败的解决方法
08-27
下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
自动打包插件webpack-dev-server的安装、配置及使用
01-08
1、介绍： ...在项目中本地安装的webpack-dev-server无法作为脚本命令直接运行 因此 需在package.json中进行配置： 3、使用： 配置之后 输入npm run dev运行 默认启动在8080端口： 注：webpack-dev-
解决webpack-dev-server实时重新加载不出来问题
qq_52959651的博客
12-15 820
解决webpack-dev-server实时重新加载不出来问题 这几天在安装webpack-dev-server时，出现一些问题，前一天webpack-dev-server运行成功，关闭电脑后，后一天再运行其他命令，发现会报各种各样的错误，下面是我针对自己出现的问题的解决方法。 （我的报错是因为我直接运行其他命令，没有将之前的命令重新运行一遍，导致之前的没有运行出来，所以一直报错） 在vs code终端里运行以下命令 1：执行npm i命令，重新运行 如果第一个命令出错，可能的你的代码内部出现了问题，可以
关于webpack-dev-server和webpack4.x配置热更新&jsonp无刷新
Amethyst的博客
02-03 461
学webpack以来折腾最久的一次bug… 安装webpack-dev-server（在此之前要先完成webpack基本配置，不再赘述） yarn add webpack-dev-server -D 此时出现警告如下： 原因是chokidar 2和fsevents 1版本过低，node.js版本在14以上时将会报此错，接下来，用npm upgrade升级（先要保证安装了npm upgrade） npm-check 检查更新: npm install -g npm-check npm-upgrade
Vue 文件保存后，浏览器不自动刷新
热门推荐
Wzw的博客
01-23 1万+
Vue 文件保存后，浏览器不自动刷新 在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。 module.exports = { devServer: { port: 3000, open: true, hot: true,//自动保存 }, } 再重新加载项目即可。 ...
webpack打包常见报错解决方案
qq_28749759的博客
02-21 1286
学习过程问题总结
webpack-dev-server页面不能自动刷新的解决
喵大嗷的博客
04-02 8656
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载 通过官方文档各种配置，自己实验了一把，不知道是哪里出了问题，一直实现不了实时加载，后来查阅资料，一个很简单的配置就实现了实时加载，在这里记录一下： 需要先初始化webpack-dev-server npm install webpack-dev-server --save-dev 注意，如...
webpack 的热加载问题 以及解决方法
bijunwei的博客
10-28 5879
楼主前一段写了个最简单的webpack的小dome   后来发现热更新的时候浏览器无法刷新    图二注释部分是楼主第一次的引入的js路径，但是热更新无效，但是图一显示output的路径没有问题， 关键在于 webpack-dev-server 热加载插件编译的build.js 是是放到内存中的所以讲src改成下面那种热加载就生效了  当然也可以用注释掉的那种路径写，  那
webpack 开启热加载
cominglately的博客
06-05 3448
场景 . 开发中的良药，自动加载 分析 这里面有个误区，webpack和webpack-dev-serve 加载的bundle.js 是两个不同的概念 webpack的bundle.js是可以在webpack.config.js中指定的 webpack-dev-server的bundle.js是在内存中的 一定要在index.html指定...
完美解决Webpack多页面热加载缓慢问题
localhost_1314的博客
12-22 8982
         Webpack多页面热加载缓慢问题分析与解决 一、问题引入 使用webpack + vue多入口模式后，随着项目模块越来越多，整个项目的入口多达30多个，热更新变得缓慢，保存一次等待热加载的时间多达2-3分钟，这也意味着，改一下代码保存后要等2分多钟才能看到效果，非常影响开发效率。 二、问题分析 我们的代码无问题，而是html-webpack-plugin插件存在性能问题...
webpack5.0使用webpack-dev-server时，无法自动刷新网页html页面解决方案
chengzhijun93的博客
09-30 2747
有讲target:'web’的 有讲添加inline属性的（但是会显示如下错误） [webpack-cli] Error: Unknown option ‘–inline’ 其实主要还是webpack5.0改了~不支持inline，也不支持contentBase这些 解决方案：添加如下代码 折腾了一半天看了说明书才解决，如果有用的话麻烦点个赞~谢谢 如果如下方案无法解决请访问此超链接试试 官方文档关于watchFiles说明 devServer: { watchFiles: ['./src/index.h
webpack-dev-server
最新发布
08-25
webpack-dev-server 是一个用于开发环境的轻量级服务器，它与 webpack 模块打包工具结合使用，提供了实时重新加载（live reloading）和热模块替换（hot module replacement）等功能，使得在开发过程中可以快速地预览...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值