webpack热更新配置

webpack热更新（Hot Module Replacement）是一种开发工具，它可以在开发过程中实时更新修改的模块，而无需重新加载整个页面。要配置webpack热更新，你需要进行以下几个步骤：

1. 在webpack配置文件中，添加webpack-dev-server作为开发服务器的依赖：

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

2. 在webpack配置文件中，添加devServer选项来配置webpack-dev-server：

const path = require('path');

module.exports = {
  // 其他配置项...

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 指定服务启动的根目录
    compress: true, // 启用gzip压缩
    port: 8080, // 指定服务运行的端口号

    // 配置热更新
    hot: true,
    hotOnly: true,
  },
};

3. 在package.json文件中，添加一个命令以启动webpack-dev-server：

{
  "scripts": {
    "start": "webpack-dev-server --open"
  }
}

4. 运行命令`npm start`来启动开发服务器。

这样就完成了webpack热更新的配置。在你修改源代码后，开发服务器会自动监听文件变化并更新页面，而不需要手动刷新浏览器。