HMR使用

Hot Module Replacement（简称 HMR)

webpack hmr 原理参考：https://www.jianshu.com/p/95f5f51e6fc7

hmr api :https://cloud.tencent.com/developer/section/1477225

前言

hmr 热更新（就是项目发生变化页面更新）

hmr能够使项目在运行时，无需开发者重新npm run dev 刷新页面，便能更新更改模块，目前有许多脚手架——比如vue-cli ，create-react-app 这些脚手架自动为我们配置好了热更新功能，但某些情况还是需要我们自己配置

webpack 项目中开启hmr

hmr是集合在 webpack-dev-server中

第一步：开启hmr

webpack.config.js 加入一下这三步就可以使用hmr

  1. const webpack = require('webpack') //1
  3. module.exports = {
  4.   devServer:{ //2
  5.     // hot:true,//错误情况如果在运行中出现错误hmr浏览器会自动刷新了打印页面找不到错误信息这时候就需要修改hot改为hotOnly
  6.     hotOnly:true //好处是，打印信息面板不会自动刷新
  7.   },
  8.   module: { ... },
  9.   plugins: [
  10.     new webpack.HotModuleReplacementPlugin()//3 webpack中包含的HotModuleReplacrmentPlugin 插件
  11.   ]
  12. }

执行项目时，这些样式或者js都不会热更新。为什么呢？因为hmr并不像webpack其他插件开箱即用，它需要额外配置 。而样式文件可以是经过loader处理过的所以不需要我们去做额外操作。(条件是，使用css-loader打包css)。js文件则需要自己配置因为每个文件的需求不同，没办法统一。

第二步处理js的热更新

main.js

  1. import createEditor from './editor'
  2. import background from './better.png'
  4. const editor = createEditor()
  5. document.body.appendChild(editor)
  7. const img = new Image()
  8. img.src = background
  9. document.body.appendChild(img)
  11. -------------- 以上与配置无关 ----------------------
  14. // module 提供的hot 是hmr api的核心对象
  15. // accept('更改的路径','依赖模块更新后的处理函数') 注册某一模块更新后的处理函数 接受两个参数
  16. module.hot.accept('./editor',()=>{
  17.     console.log("editor 模块更新了")
  18. })

js页面需要手动加入 accept接收两个参数

accept的两个参数

  1. 第1个参数.'./editor'   如果editor模块修改需要更新的模块路径 如 editor修改后把修改的内容放置editor.js模块中
  2. 第2个参数.function(){}   更新后的模块处理函数

开始更新模块处理

  1. console.log(createEditor)
  3. module.hot.accept('./editor',()=>{
  4.   console.log(createEditor) // 查看className
  6. })

sourMap.png

由此得知 。我们已经拿到旧的内容和新内容。我的需求是：把新修改的数据替换掉旧数据。（简而言之：新的替换旧的内容）

  1. let oldCreateEditor = editor; //需要在这里记录下旧的内容
  2. module.hot.accept('./editor',()=>{
  3.     console.log("editor 模块更新了")
  4.     document.body.removeChild(oldCreateEditor)
  5.     const newCreateEditor = createEditor()
  6.     document.body.appendChild(newCreateEditor)
  7.     oldCreateEditor = newCreateEditor
  8. })

配置完成之后启动 webpack-dev-server

这里是 webpack4 的命令：yarn webpack-dev-server —open（启动hmr需要启动webpack-dev-server）

webpack5 命令： yarn webpack server —open

图片的热更新图片热更新是比较简单的。我们都知道 module里面的是最新内容 当然也是background的最新链接，直接重新复制src就可以完成热更新。（可以有多个 module.hot.accetp）

  1. module.hot.accept('./better.png',() => {
  2.     img.src = background
  3. })

sourMap1.png也可以将hot替换为 hotOnly

  1.   devServer:{
  2.     // hot:true,//错误情况如果在运行中出现错误,浏览器会自动刷新了打印页面找不到错误信息,这时候就需要修改hot改为hotOnly
  3.     hotOnly:true //好处是，打印信息面板不会自动刷新
  4.   },