HMR|Webpack
问题场景
上文提到webpack-dev-server可实现 自动打包编译＋自动刷新浏览器 的效果。
在开发环境中，编写好代码，免不了进行调试，预览效果
思考一场景：测试表单项输入+校验功能，已完成输入操作，突然觉得边框颜色不对，修改下样式……
webpack-dev-server 具有 live reloading(实时重新加载) 功能
不难猜到，此时的开发体验：代码修改---页面自动刷新---重新输入操作，继而调试功能
设想
从上述问题场景可以发现：
自动刷新浏览器，即页面进行刷新，页面中所有的操作状态、数据将丢失
页面数据的丢失，也许想到用缓存（如LocalStorage、localforage等）来解决
但开发环境中编写调试，这样处理，明显增加的不必要的成本，效率变低
所以，期望的方案：不完全刷新页面，只更新对应存在改动的部分
HMR
模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。
概念
webpack的HMR
可实现只将 修改的模块 实时替换至页面中，无需完全刷新 整个页面
属于webpack 内置 的插件，已集成，无需额外安装
适用于 开发环境（即不适用于生产环境）
实现原理可详见 # 传送门
启用方式
运行 webpack-dev-server 命令时配置
--hot参数设置配置文件的devServer中
hot属性为true +HotModuleReplacementPlugin插件
const webpack = require('webpack') devServer: { hot: true } plugins: [ new webpack.HotModuleReplacementPlugin() ] 复制代码Some Loader
style-loader
一般在webpack中，对于样式文件的加载，会配置css-loader & style-loader
css-loader 作用：加载css样式模块到入口js中
style-loader 作用：通过创建
<style>标签，将css-loader加载的样式模块添加到页面上
开启HMR后，修改样式文件，可模块热替换无误呀~
但背后的原理，需要注意下：
借助于
style-loader，使用模块热替换来加载 CSS 实际上极其简单。此 loader 在幕后使用了module.hot.accept，在 CSS 依赖模块更新之后，会将其 patch(修补) 到<style>标签中
即style-loader自动处理了样式文件的HMR
vue-loader
webpack加载.vue文件，当然少不了vue-loader的配置，对应支持了 vue组件 的HMR
启用热重载后，当你修改
.vue文件时，该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提高了开发体验
作者：ALISONLY
链接：https://juejin.cn/post/7023386917999738917