31 热替换 HMR - 《webpack》

使用和原理
样式热替换

热替换不能降低构建时间,可能还会稍微增加,但是可以降低代码改动到效果呈现的时间

当使用webpack-dev-server时,考虑代码改动到效果呈现的过程

而使用了热替换以后,流程发生了变化

使用和原理

更改配置

module.exports={
    devServer:{
    hot:true //开启HRM
  },
  plugins:[
    //可选
    new webpack.HotModule.ReplacementPlugin(); // webpack4 以后可以不写
  ]
}

更改代码

// index.js
if(module.hot){ //是够开启了热更新
    module.hot.accept() //接受热更新
}

首先,这段代码是会参与最终运行的

当开启了热更新后,webpack-dev-sever 会向到打包结果中注入 module.hot 的属性

默认情况下,webpack-dev-server 不管是否开启了热更新,当打包的的时候,都会调用location.reload 刷新页面

但是如果运行了module.hot.accept(),将改变这一行为

module.hot.accept() 的作用是让webpack-dev-server 通过socket管道,把服务器更新的内容发送到浏览器

然后,将结果交给插件,HotModuleReplacementPlugin注入代码执行

插件HotModuleReplacementPlugin会根据覆盖原始代码,让后让代码重新执行

所以,热替换发生在代码运行期

样式热替换

对于样式也是可以使用热替换的,但是需要使用style-loader

因为热替换发生时,HotModuleReplacementPlugin只会简单的重新运行模块代码

因此style-loader的代码已运行,就会重新设置style元素中的样式

而min-css-extract-plugin,由于它生成文件是在 ,运行期间并不会也无法改动文件,因此对于热替换是无效的