深入了解 Webpack 的热模块替换 (第一部分 - 基础知识)

以下文章是关于 Webpack 热模块替换的“深入探讨”系列的第一部分。 webpack.

• 第 1 部分：基础知识
• 第 2 部分：使用 module.hot API 处理热更新 (此处提供)

第 1 部分：基础知识

让我们想象一下，现在还是 12 月中旬，我已经按时完成了这篇博文……

圣诞节即将到来，是时候装饰客厅里的圣诞树了。你拿出存放去年装饰品的箱子。首先，拿出灯串。在解开缠绕的灯串时，确保自己没有压力。退后一步，也许放一些圣诞音乐，给自己泡一杯茶。几个小时后，你就可以把灯串挂到树上了。太棒了，最难的部分结束了。现在，你可以挂一些花环和漂亮的装饰品了。最后，你把 Star™ 放在树顶，点亮灯光。真漂亮。

但是……那是正确的 Star™ 吗？你决定你实际上想要闪亮的新彩虹 Star™，而不是保守的旧黄色 Star™。为了更换这件装饰品，你需要拆掉所有东西并从头开始整个过程吗？当然不是！你只需要取下旧的 Star™ 并换上新的即可。

如果你还在读，你可能想知道这到底是怎么回事。好吧，你的圣诞树就像一个 JavaScript 应用程序。装饰品、花环和灯串是应用程序的模块。允许你更改装饰品而无需拆卸树的机制称为 热模块替换。而我们今天要玩的就是 HMR。

我为什么要关心它？

因为使用 HMR 进行开发速度更快。

我从事 NativeScript 框架的工作，有时甚至用它来构建应用程序。让我们回顾一下我作为 NativeScript 开发人员在 热模块替换之前 的生活。

在上面的视频中，我正在开发一个应用程序，该应用程序具有登录屏幕和管理员屏幕，只有授权用户才能访问。登录后，我对管理员屏幕进行更改。重新加载过程开始。我们可以将其分解为四个阶段

1. 更改的模块被传输到设备。
2. 整个应用程序被拆除并从登录屏幕重新启动。
3. 我再次登录。
4. 我被重定向到管理员页面，在那里我看到了我的更改。

现在，让我们看看在热模块替换加入的情况下，相同过程是什么样子。

重新加载步骤现在是

1. 更改的模块被传输到设备。
2. 管理员页面重新加载。
3. 我看到了我的更改。

它速度明显更快，因为只重新加载当前屏幕，并且用户会话得以保留。

它是如何工作的？

NativeScript 使用 webpack 处理应用程序的 JavaScript 部分。Webpack 查找应用程序正在使用的所有模块，并将它们捆绑到一些输出文件中。

Webpack 有三个密切相关的术语——模块、块和包。模块是封装数据并提供功能的 JS 代码片段。模块可以相互依赖，从而形成一个依赖关系图。在 webpack 捆绑过程中，一些模块构成一个块。包是捆绑过程生成的输出文件。在大多数情况下，每个块都会发出一个包。

Webpack 还支持一项称为热模块替换 (HMR) 的功能。HMR 在应用程序运行时交换、添加或删除模块，而无需完全重新加载。

但是，HMR 不会在您更改代码时神奇地重新加载您的应用程序。应用程序本身必须知道如何对传入的更改做出反应。让我们仔细看看 HMR 流程。

1. 当您进行更改时，webpack 编译器负责生成包旧版本和新版本之间的“差异”（热更新）。
2. webpack 开发服务器处理 HMR 的运输物流。换句话说，它确保在应用程序请求时可以加载热更新。使用webpack-dev-server来传输文件不是强制性的。在 NativeScript 生态系统中，NativeScript CLI 扮演着这个角色。
3. 注入到应用程序包中的特殊代码获取热更新。然后，它开始查找每个应替换的模块的处理程序。
4. 如果找到合适的处理程序，则替换模块。如果没有，则过程失败，并且模块不会被替换。显然，在这种情况下最好有一个回退方案。在浏览器中，页面重新加载，在 NativeScript 中，应用程序重新启动。

总结

总结一下，今天我们了解到

• 热模块替换是 webpack 提供的功能；
• 热模块替换通过缩短重新加载时间并保留应用程序状态，使我们作为开发人员的生活更加轻松；
• 在解开圣诞灯串时，你应该做好失败的准备；
• 热模块替换不是魔术，但你的应用程序应该知道如何使用它。

在 HMR 系列的下一篇文章中，我们将把目光转向最后一点。我们将学习如何在应用程序内部处理传入的更改。