Webpack 是现代前端开发中不可或缺的构建工具，而其中的 HMR（Hot Module Replacement，热模块替换）机制更是极大地提高了开发效率。接下来，让我们通过 120 行代码深入洞悉 Webpack 中的 HMR 机制。

我们需要明确 HMR 的核心概念。它允许在应用运行时，无需完全刷新页面，就能实时更新修改的模块。这意味着开发者能够保持当前的应用状态，迅速看到代码更改的效果。

以下是一段简单的示例代码，用于展示 Webpack HMR 的基本实现：

// 引入 Webpack 相关模块
const webpack = require('webpack');
const path = require('path');

// 创建 Webpack 配置对象
const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

// 启动 Webpack 开发服务器
const compiler = webpack(config);
compiler.watch({}, (err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(stats.toString({ colors: true }));
});

在上述代码中，我们首先设置了入口文件、输出路径和文件名。然后，在 devServer 配置中启用了 hot: true 来激活 HMR 功能。通过添加 webpack.HotModuleReplacementPlugin 插件，为 HMR 提供了必要的支持。

当我们对代码进行修改时，Webpack 会检测到更改，并将更新的模块发送到客户端。客户端接收到更新后，会自动替换相应的模块，实现无刷新更新。

HMR 机制的优势显而易见。它减少了页面的重新加载时间，保持了应用的状态，如表单输入的值、滚动位置等，让开发者能够更加流畅地进行开发和调试。

通过这 120 行代码，我们初步了解了 Webpack 中 HMR 机制的工作原理和实现方式。深入掌握 HMR 机制，将有助于我们在前端开发中提高效率，打造更出色的应用体验。