就是这么简单！隔壁屋的阿珍都能看懂的 webpack 热更新原理

2023-10-23 19:03:56

webpack 是一个现代 JavaScript 应用程序的打包工具，它可以将许多小的 JavaScript 文件打包成一个或多个更大的文件，以便在浏览器中加载。webpack 也支持热更新，即在不重新加载页面的情况下更新应用程序的代码。这种功能在开发过程中非常有用，因为它可以节省很多时间。

webpack 热更新是如何工作的呢？当我们在开发应用程序时，webpack 会启动一个开发服务器，这个服务器会在后台监听文件的变化。当文件发生变化时，webpack 会重新打包应用程序，然后将新代码发送给浏览器。浏览器会自动加载新代码，而无需重新加载页面。

webpack 热更新的关键技术是 Hot Module Replacement (HMR)。HMR 是一种用于在不重新加载页面的情况下更新模块的技术。HMR 是通过在每个模块中注入一个特殊的客户端来实现的。这个客户端负责监听文件的变化，当文件发生变化时，它会通知 webpack 服务器。webpack 服务器会重新打包应用程序，然后将新代码发送给浏览器。浏览器会自动加载新代码，而无需重新加载页面。

webpack 热更新是一个非常有用的工具，它可以节省很多开发时间。然而，webpack 热更新也有一些限制。首先，webpack 热更新只适用于 JavaScript 代码。其次，webpack 热更新不能用于更新 HTML、CSS 或其他类型的文件。

尽管有这些限制，webpack 热更新仍然是一个非常有用的工具。它可以帮助开发人员更快地构建和测试应用程序，从而提高开发效率。

如何使用 webpack 热更新

要使用 webpack 热更新，你需要安装 webpack 和 webpack-dev-server。你可以在终端中运行以下命令来安装它们：

npm install --save-dev webpack webpack-dev-server

安装完成后，你需要创建一个 webpack 配置文件。这个文件通常称为 webpack.config.js。在 webpack.config.js 文件中，你需要配置 webpack 的各种选项。其中，你需要特别注意 devServer 选项。这个选项用于配置 webpack 开发服务器。

module.exports = {
  devServer: {
    hot: true
  }
};

配置完成后，你就可以运行 webpack 开发服务器了。你可以使用 webpack CLI 工具或 npm 脚本来启动 webpack 开发服务器。

npx webpack-dev-server

webpack 开发服务器启动后，你就可以开始编写代码了。当你在代码中进行修改时，webpack 会自动重新打包应用程序，然后将新代码发送给浏览器。浏览器会自动加载新代码，而无需重新加载页面。

webpack 热更新的原理

webpack 热更新是如何工作的呢？webpack 热更新的关键技术是 Hot Module Replacement (HMR)。HMR 是一种用于在不重新加载页面的情况下更新模块的技术。HMR 是通过在每个模块中注入一个特殊的客户端来实现的。这个客户端负责监听文件的变化，当文件发生变化时，它会通知 webpack 服务器。webpack 服务器会重新打包应用程序，然后将新代码发送给浏览器。浏览器会自动加载新代码，而无需重新加载页面。

HMR 客户端是如何工作的呢？HMR 客户端是一个 JavaScript 文件，它会被 webpack 自动注入到每个模块中。HMR 客户端负责监听文件的变化，当文件发生变化时，它会通知 webpack 服务器。HMR 客户端与 webpack 服务器之间的通信是通过 WebSocket 实现的。

当 HMR 客户端检测到文件发生变化时，它会向 webpack 服务器发送一条消息。这条消息包含了以下信息：