webpack4.x热更新，自动刷新

模块热替换(Hot Module Replacement)

模块热替换功能会在应用程序运行过程中替换、添加或删除模块，无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

• 保留在完全重新加载页面时丢失的应用程序状态。
• 只更新变更内容，以节省宝贵的开发时间。
• 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

webpack-dev-server实现热更新(HMR)

webpack-dev-server就是一个基于node.js和webpack的小型服务器。

热更新可以做到在不刷新浏览器的前提下更新页面。

安装webpack-dev-server

npm install webpack-dev-server --g npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

const webpack=require('webpack');//引入webpackentry:__dirname+'/src/main.js',output:{publicPath:'/dist',//必须加publicPathpath:__dirname+'/dist',filename:'bundle.js'},devServer:{host:'localhost',port:'8080',open:true//自动拉起浏览器hot:true,//热加载//hotOnly:true},plugins:[//热更新插件new webpack.HotModuleReplacementPlugin()]

但是通过日志发现页面先热更新然后又自动刷新，这和自动刷新是一样的。
如果只需要触发HMR，可以再加个参数hotOnly:true,这时候只有热更新，禁用了自动刷新功能。
如果需要自动刷新就不需要设置热更新。

热跟新必须有以下5点：
1.引入webpack
2.output里加publicPath
3.devServer中增加hot:true
4.devServer中增加hotOnly:true
5.在plugins中配置 new webpack.HotModuleReplacementPlugin()

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的webpack4.x热更新，自动刷新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。