webpack提升打包构建速度(hmr/热模块替换)

一、 场景

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

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

这个就需要在webpack.config.js中配置一下hmr热模块替换

二、什么是HotModuleReplacement

HotModuleReplacement（简称HMR）是Webpack提供的一个功能，它可以在不刷新页面的情况下，实现局部模块的热更新。也就是说，当你修改了一个模块的代码后，HMR会自动将修改的部分更新到浏览器中，而不会重新加载整个页面。

HMR的实现原理是通过WebSocket连接服务器，实时监听文件变化，然后动态更新模块。对于一些纯数据的模块，Webpack会使用热替换（Hot Replacement）技术，替换旧模块。

使用HMR可以提高开发效率和调试体验。在开发过程中，只需修改特定的代码，即可实时保存并查看修改结果，无需手动刷新浏览器。同时，HMR也避免了页面重新加载，减少了开发时间和流量消耗。

三、配置使用

在开发环境下将devServer的hot配置成true就行了

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。

js需要到main.js中配置，如下：

if (module.hot) {
  module.hot.accept('./library.js', function() {
    // 对更新过的 library 模块做些事情...
  });
}

// or
if (import.meta.webpackHot) {
  import.meta.webpackHot.accept('./library.js', function () {
    // Do something with the updated library module…
  });
}