【webpack5】webpack-dev-server 热更新不能自动刷新浏览器

一、问题

配置了热更新，但是不会自动刷新页面

// webpack.dev.config.js{devServer: {progress:true,// 进度条port: 10086, // 本地服务器端口号hotOnly:true,// 页面构建失败不刷新页面hot: true, // 热重载open: true, // 自定打开浏览器proxy:{'/api':'http:localhost:8080'}}}

二、解决

1、target:‘web’

webpack5 target配置项

// webpack.dev.config.js
module.export = {target: "web"
}

2、.browserslistrc

package.json同级目录下加.browserslistrc文件，此配置也试用postcss。

last 1 version
> 1%
IE 9
Chrome > 49

3、hotOnly

// webpack.dev.config.js{devServer: {hotOnly:false,// 页面构建失败不刷新页面}}

三、原因

这是webpack-dev-server 的一个bug,BUG：

Yes, we need to fix it in webpack-dev-server, hope I will find time on it, anyway you can send a PR

解决方案：

adding target: ‘web’ (which overwrites the default being ‘browserlist’ since 5.0.0-rc.1) to Webpack config resolves the issue

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器相关推荐

webpack4.x热更新，自动刷新
模块热替换(Hot Module Replacement) 模块热替换功能会在应用程序运行过程中替换.添加或删除模块,无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新 ...
深入理解webpack自动刷新浏览器
文章目录 1. 自动刷新浏览器 1.1 监听文件变化 1.1.1 方式 1.1.2 原理 1.2 自动刷新浏览器 1.2.1 原理 2. 模块热更新 2.1 两种方式 2.1.1 webpack-de ...
webpack和vue热更新
目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块总结 ...
更为简单的Ctrl+S自动刷新浏览器工具-LinrF5
一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...
chrome LiveReload – 修改网页源代码后帮你自动刷新浏览器
在本地写网页代码,通常都是保存以后再在浏览器里刷新一遍看看效果,刷新这个可真是体力活,不过懒人也有福了,因为有了 LiveReload. LiveReload 是一款跨平台的软件,在 OS X.Win ...
webpack配置及热更新原理
1:配置webpack 1:新建一个vue项目: 进入目录,在终端创建: vue create 项目名: 2:创建新文件对应的文件目录src下新建存放css文件index.css,项目的入口文件ma ...
WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
webpack5.0使用webpack-dev-server时，无法自动刷新网页html页面解决方案
有讲target:'web'的有讲添加inline属性的(但是会显示如下错误) [webpack-cli] Error: Unknown option '–inline' 其实主要还是webpack ...
idea 热部署_Spring Boot Idea中热部署（自动刷新）
在Idea中开发Spring Boot项目,每当修改内容之后,都需要点一下重启来进行重新发布,比较繁琐.针对这个问题Spring Boot中提供了一个devtools的工具项目,可以帮助我们完成自动刷 ...

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器

一、问题

二、解决

1、target:‘web’

2、.browserslistrc

3、hotOnly

三、原因

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器相关推荐

最新文章

热门文章