webpack-HMR-热更新

1、什么是HMR

• 通过webpack-dev-server自动打包并没有真正的放到指定的目录中，因为读写磁盘是非常耗时和消耗性能的,所以为了提升性，webpack-dev-server将转换好的内容直接放到了内存中。
• 通过webpack-dev-server可以实现实时监听打包内容的变化,每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页。
• HMR(HotModuleReplacementPlugin)热更新插件,会在内容发生改变的时候时时的更新修改的内容但是不会重新刷新网站。

2、HMR使用:

HotModuleReplacementPlugin是一个内置插件, 所以不需要任何安装直接引入webpack模块即可使用。
①　在devServer中开启热更新

hot: true, //开启热更新
hotOnly: true, //即使热更新不生效，浏览器也不自动刷新

②　在webpack.config.js中创建热更新插件

new Webpack.HotModuleReplacementPlugin()

(3)热更新处理css:
如果是通过style-loader来处理CSS, 那么经过前面两步就已经实现了热更新。
如果是通过MiniCssExtractPlugin.loader来处理CSS, 那么还需要额外配置MiniCssExtractPlugin.loader。

 {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: true,  //开启热更新
            },
      },

(4)webpack-HMR-热更新处理JS
①　JS模块如何实现热更新?
手动监听模块变化：

if(module.hot){ // 判断是否开启热更新
    module.hot.accept("./test.js", function () { // 监听指定JS模块变化
    });
}

手动编写模块变化后的业务逻辑：

if(module.hot){
    module.hot.accept("./test.js", function () {
        let div = document.querySelector("div");
        console.log(div);
        document.body.removeChild(div);
        copy();
    });
}