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