【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