高级优化2.HotModuleReplacement热模块替换

最新推荐文章于 2024-08-12 15:38:28 发布

前端知识

最新推荐文章于 2024-08-12 15:38:28 发布

阅读量99

点赞数

分类专栏： webpack 文章标签： webpack Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71902265/article/details/129465222

版权

webpack 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

热模块替换(HMR)是Webpack提供的一种优化开发效率的功能，它允许在代码更新时只替换修改过的模块，无需完全重新打包。通过devServer配置开启HMR，并结合特定的loader如style-loader和react-hot-loader，开发者可以实现JS和CSS的热更新，提高开发过程中代码迭代的速度。

摘要由CSDN通过智能技术生成

为什么有热模块替换？

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

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

用法：

module.exports = {
  devServer: {
    host: "localhost", 
    port: "3000", 
    open: true, 
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

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

JS 配置

if (module.hot) {
  module.hot.accept("./js/count.js", function (count) {
    const result1 = count(2, 1);
    console.log(result1);
  });

  module.hot.accept("./js/sum.js", function (sum) {
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });
}

上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。

比如：vue-loaderopen in new window, react-hot-loaderopen in new window