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…
  });
}