Webpack高级学习：提升打包构建速度HotModuleReplacement（HMR/热模块替换）-更新局部打包

开发时,项目越来越大，我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。

我们可以修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。——是默认配置

当关闭时候 ，改变内容；页面全部刷新

  devServer: { // 开发服务器不会输出资源，再内存编译中打包
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot:false,//关闭HMR功能（只能用于开发环境，生产环境不需要了）
   },

当开启HMR，只能用于开发环境，生产环境不需要了

    // 开发服务器-自动编译
    devServer: { // 开发服务器不会输出资源，再内存编译中打包
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot:true,//开启HMR功能（只能用于开发环境，生产环境不需要了）
   },

发现整个页面没有刷新

// 判断是否支持HMR功能

if (module.hot) {
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count.js");//接收./js/count.js

  }

此时更改count.js文件 局部刷新

如果是sum模块

   if (module.hot) {
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count.js");//接收./js/count.js
    module.hot.accept("./js/sum.js")
    
  }

但是当模块很多时候一个个写很麻烦

实际开发中使用加载器

当然main.js里面还可以写函数，此时热模块的局部刷新失效

  module.hot.accept("./js/sum.js", function (sum) {//函数作用一旦里面sum文件发送变化就调用函数
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });