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

【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

你可能感兴趣的:(前端工具,web,webpack,js)