Hot Module Replacement 热更新和自动刷新_node_modules\webpack\lib\hotmodulereplacementplugi

目录

一、热更新

二、自动刷新：

三、如何选择？

---

一、热更新

HMR的热模块替换：1、样式改变的热模块替换。2、js代码的热模块替换。

---

（1）每次点击新增按钮后，都会生成一个新的item，下标为奇数项的背景颜色为黄色，当改变代码中背景颜色为绿色之后，页面会自动刷新，刷新之后已经存在的item会消失，重新点击新增按钮才出现，背景颜色为绿色。

div:nth-of-type(odd) {
    background: yellow;
}

（2）希望页面原素依旧存在，仅仅是css样式发生改变，这时候就到了使用HMR的时候，注意，HMR是webpack自带的插件。

webpack.config.js配置文件

 
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
const webpack = require('webpack');
 
 
    entry: {
        // index: path.join(srcPath, 'index.js'),
        // 热更新的配置
        index: [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/dev-server',
            path.join(srcPath, 'index.js')
        ],
        other: path.join(srcPath, 'other.js')
    },
 
 
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'  //根据这个路径下的模版来生成打包结束后的html模版。
        }),
        new CleanWebpackPlugin(), //打包之前清理输出文件夹中的内容
        // 热更新插件配置
        new webpack.HotModuleReplacementPlugin()  //使用webpack自带的HMR插件
    ],

上述插件配置完成之后，改变完样式保存，不会将页面元素进行刷新，仅仅刷新样式。

---

HMR在JS中的应用

counter.js：

//  自增加一的函数
function counter() {
    var div = document.createElement('div');
    div.setAttribute('id', 'counter');
    div.innerHTML = 1;
    div.onclick = function() {
        div.innerHTML = parseInt(div.innerHTML, 10) + 1;
    }
    document.body.appendChild(div);
}
export default counter;

number.js:

function number() {
    var div = document.createElement('div');
    div.innerHTML = 1000;
    document.body.appendChild(div);
}
export default number;

index.js: 

import counter from './counter';
import number from './number';
counter();
number();

 点击上面的会从1增加，当加到8时，改变number代码中的1000为2000，那么页面会自动刷新，将上面的数字重新置为1，下面显示改变后的2000。

希望改变下面组件中的代码，不影响其他组件中的状态，只更新改变的元素。

配置上述中的插件+if(module.hot)的判断函数，当上面数字为8时，此时改变number中的代码，保存更新不会对上面的数据造成影响，仅仅是更新下面的元素。

import counter from './counter';
import number from './number';
counter();
number();
 
 
//增加：如果当前项目开启了HMR，会执行下面的代码
if(module.hot) {
    // 匹配到的文件会进行热更新的处理
    module.hot.accept('./number', function() {
        document.body.removeChild(document.getElementById('number'));
        number();
    })
}

---

 二、自动刷新：

保存修改之后，浏览器会自动进行刷新，一般使用webpack-dev-server，它自身就有自动更新的功能，不需要单独进行下面这种手动配置自动更新。

三、如何选择？

热更新和自动刷新，都是用于开发过程中，一般来说自动刷新可以满足开发需求，如果开发过程中，刷新页面满足不了开发效率或者开发体验，那么可以考虑使用热更新。

需要了解热更新好用是好用，但也是有成本的，不仅需要配置，还需要补充一部分代码，来处理需要热更新的文件及相关逻辑。