写在前面
在上一文中介绍了《如何使用DevServer提高你的本地开发效率》，在配置好DevServer可以让我们更加专注业务编码，可以实现代码更新来让页面样式重新渲染。但是当我们使用DevServer去自动刷新时，例如在进行编辑器开发修改了文本样式，会刷新页面编辑器文本丢失，不能实时显示样式。当然我们也有对应的解决方法，例如：
- 可以回到代码中写死文本内容到编辑器中，这样即使页面刷新，也不会丢失内容
- 通过代码将编辑器中的内容及时保存到localStorage中，刷新后再重新获取 但是，这些方法存在不足，只是有漏补漏的措施，并没有根本解决问题，并不适合代码的维护。这时候webpack就提供了模块热替换HMR来解决我们的问题。
模块热替换HMR
HMR全称 Hot Module Replacement，即为"模块热替换"或"模块热更新"。在计算机领域有个"热插拔"的概念，指的是在正在运行的计算机设备上插拔设备，并不会影响计算机的正常运行，插上去的设备能够立刻工作。这里的"热"指的是在运行过程中的即时变化。
HMR已经集成在webpack模块中，所以不需要再单独安装模块，在运行webpack-dev-server命令时，通过--hot参数去开启这个特性，或者也可以在配置文件中通过添加对应的配置来开启这个功能，这里需要配置两个地方：
- 需要将devServer对象中的hot属性设置为true
- 需要载入一个插件，这个插件是webpack内置的一个插件，所以先导入webpack模块，有了模块后就可以使用一个叫做HotModuleReplacementPlugin插件。
- const webpack = require("webpack")
- module.exports ={
- devServer:{
- // 开启HMR特性，如果资源不支持HMR会fallback到live reloading
- hot: true
- // 只使用HMR，不会fallback到live reloading
- // hotOnly:true
- },
- plugins:[
- // HMR特性所需要的插件
- new webpack.HotModuleReplacementPlugin()
- ]
- }
至于为什么我们开启HMR过后，样式文件的修改就可以直接热更新呢，而且我们并没有手动处理样式模块的更新?这是因为样式文件是经过Loader处理的，在style-loader中就已经自动处理了样式文件的热更新，所以就不需要我们额外手动去处理。
那么什么样式可以自动更新处理呢，然而我们的脚本文件却需要自己手动处理?这是因为样式模块更新后，只需要将更新后的css及时替换到页面中，这样就可以覆盖掉之前的样式，从而实现更新。
然而我们在使用vue-cli或者create-react-app框架脚手架工具时，可能没有进行手动处理，js代码照样可以实现热替换。这是因为我们在使用框架的时候，项目中的每个文件都是有规律可循的，比如：react中要求每个模块导出的必须是个函数或者类，那么这样就可以有通用的替换方法，所以这些工具内部都已经实现了通用的替换操作，就不再需要我们手动处理了。
参考文章
《webpack原理与实践》
《webpack中文文档》
写在最后
其实在我们自己在项目中配置HMR时，需要写一些额外的代码会觉得比较麻烦，但是还是需要我们了解其深层的原理。关于前端框架vue、react都是集成式框架，都是开箱即用，已经继承了HMR相关的配置。
