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

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

一、问题

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

二、解决

1、target:‘web’

webpack5 target配置项

// 
module.export = {
	target: "web"
}

• 1
• 2
• 3
• 4

2、.browserslistrc

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

last 1 version
> 1%
IE 9 
Chrome > 49

• 1
• 2
• 3
• 4

3、hotOnly

// 
 {
	 devServer: {
	   
	    hotOnly:false,// 页面构建失败不刷新页面
	   
	  }
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

三、原因

这是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