06HMR热加载

Posted 2020-12-18 lhongsen

HMR热加载

• 如果需要开启HMR热加载功能，只需要在webpack.config.js中配置

/**
 * HMR: hot module replacement 热模块替换 / 模块热替换
 *      作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 *          极大的提升构建速度
 *    样式文件：可以使用HMR功能：因为style-loader内部实现了~
 *    js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
 *    html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了（不用做HMR功能） 
 *      解决：修改entry入口，将html文件引入
 */
devServer: {
     contentBase: resolve(__dirname, ‘build‘),
     compress: true,
     port: 3000,
     open: true,
     // 开始HMR功能
     // 当修改了webpack配置，新配置要想生效，必须重启weebpack服务
     hot: true
 }

• js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
  如：创建一个print.js,暴露一个接口print

console.log(‘print.js被加载了~~~‘);

function print(){
    const content = ‘hello webpack‘;
    console.log(content);
}

export default print;

在index.js中引用，判断module.hot热加载模块是否开始，如果开始则重新调用

import ‘../css/index.less‘;
import print from ‘./print‘;

console.log(‘index.js文件被重新加载了‘);

print();

if(module.hot){
    // 一旦module.hot 为true，说明开启了HMR功能，--> 让HMR功能代码生效
    module.hot.accept(‘./print.js‘,function(){
        // 方法会监听 print.js 文件的变化，一旦发生变化，其他默认不会重新打包构建
        // 会执行后面的回调函数
        print();
    })
}