如何做到 webpack 热更新

webpack 热更新是指在应用程序运行时，不需要刷新整个页面即可实时更新页面内容。它可以提高开发效率，使得开发者可以更快地进行调试和开发。

要实现 webpack 的热更新，需要使用 webpack-dev-server 进行开发调试，具体步骤如下：

1. 安装 webpack-dev-server：`npm install webpack-dev-server --save-dev`

2. 在 webpack 配置文件中添加 devServer 配置：

devServer: {
  contentBase: path.resolve(__dirname, 'dist'),
  hot: true
}

其中，contentBase 指定服务器的静态资源目录，hot 表示开启热更新。

3. 修改 entry 配置，添加 webpack-dev-server/client 和 webpack/hot/dev-server：

entry: {
  app: ['webpack/hot/dev-server', 'webpack-dev-server/client', './src/index.js']
}

4. 在 plugins 中添加 HotModuleReplacementPlugin 插件：

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

这样就完成了 webpack 热更新的配置，启动 webpack-dev-server 即可：

webpack-dev-server --open

如果你的代码发生改变，webpack-dev-server 会自动编译并将新的模块发送到浏览器中，浏览器会使用新的模块来替换旧的模块，从而实现热更新。