本文介绍了webpack4.x中的模块热替换功能，它能在不丢失应用程序状态的情况下更新模块，加快开发速度。重点讲解了如何使用webpack-dev-server实现热更新，并通过配置webpack.config.js文件来设置热更新和自动刷新。在实践中，通过设置hotOnly:true可以禁用自动刷新，仅保留热更新。确保正确引入webpack，设置publicPath，启用hot选项，启用hotOnly选项，并在plugins中添加HotModuleReplacementPlugin插件是实现热跟新的关键步骤。
模块热替换(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文件
最低0.47元/天 解锁文章
扫一扫
3284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
