HMR

HMR： hot module replacement 热模块替换 / 模块热替换
作用 ： 一个模块发生变化，自会重新打包这一个模块 （而不是打包所有模块） 极大提升构建速度
开启： 在webpack-dev-server中开启 hot: true 。 开启后需要重启webpack服务

hot 对各种文件的作用

• 样式文件： 可以使用 HMR 功能； 因为 style-loader 内部实现了
• js 文件： 默认不能使用 HMR 功能 ， 解决：通过代码实现 , 在需要变化的js文件中加入变化的代码

注意： HMR功能对js处理，只能处理 非入口文件，入口文件改变还是会全部重新打包

import print from './print.js';
function add(x, y) {
    print();
    return x + y;
}
console.log(add(1, 2));
console.log(add(2, 2));
console.log(add(2, 5));
if (module.hot) {
    // 一旦 module.hot 为true, 说明开启了 HMR 功能。 让HMR功能生效
    module.hot.accept('./print.js', function() {
        // 方法会监听 print.js 文件的变化，一旦变化，其他模块不会重新打包
        // 会执行回调函数
        print();
    })
}

• html文件 ： 默认不能使用 HMR 功能， 同时会导致html文件不能热更新了 （不需要做HRM功能）

         解决： 修改entry入口， 将html文件引入

/**
 * 使用 HMR功能
 * 
 * HMR： hot module replacement  热模块替换 / 模块热替换
 * 作用 ： 一个模块发生变化，自会重新打包这一个模块 （而不是打包所有模块）
 *      极大提升构建速度
 * 
 * 开启： 在webpack-dev-server中开启 hot: true
 * 
 * 开启后需要重启webpack服务
 * 
 * 
 * hot 对各种文件的作用 
 * 
 * 样式文件： 可以使用 HMR 功能； 因为 style-loader 内部实现了
 * js 文件： 默认不能使用 HMR 功能 ， 解决：通过代码实现
 *          在需要变化的js文件中加入变化的代码
 *          if (module.hot) {
                // 一旦 module.hot 为true, 说明开启了 HMR 功能。 让HMR功能生效
                module.hot.accept('./print.js', function() {
                    // 方法会监听 print.js 文件的变化，一旦变化，其他模块不会重新打包
                    // 会执行回调函数
                    print();
                })
            }
    注意： HMR功能对js处理，只能处理 非入口文件，入口文件改变还是会全部重新打包
 * html文件 ： 默认不能使用 HMR 功能， 同时会导致html文件不能热更新了 （不需要做HRM功能）
 *          解决： 修改entry入口， 将html文件引入
 */