webpack dev server -- 以及修改html页面不更新问题

Webpack Dev Server 是一个开发服务器，它使得开发者可以快速开发和调试应用程序。它提供了实时重载（Live Reloading）、热模块替换（Hot Module Replacement, HMR）等功能。

主要功能

1. 实时重载（Live Reloading）： 当源代码发生变化时，Webpack Dev Server 会自动重新构建，并刷新浏览器页面以展示最新的代码变动。

2. 热模块替换（Hot Module Replacement, HMR）： 这个功能允许在应用程序运行时替换、添加或删除模块，而无需刷新整个页面。HMR 可以显著提升开发效率，特别是在样式和布局调整时。

3. 中间件（Middleware）： Webpack Dev Server 可以作为中间件与其他服务器（如 Express）集成，以便在复杂的项目中使用。

4. 代理（Proxy）： 开发过程中，可能需要将 API 请求代理到其他服务器。Webpack Dev Server 提供了代理功能，方便开发者处理跨域问题。

5. 静态文件服务（Static File Serving）： 可以指定一个目录，用于提供静态文件服务。

基本配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件
    path: path.resolve(__dirname, 'dist') // 输出目录
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' // HTML 模板文件
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 静态文件目录
    compress: true, // 启用 gzip 压缩
    port: 9000, // 服务器端口
    open: true, // 自动打开浏览器
    hot: true, // 启用 HMR
    watchContentBase: true, // 监视静态文件变化
    proxy: {
      '/api': 'http://localhost:3000' // 代理 API 请求
    }
  },
  mode: 'development' // 开发模式
};

主要选项解释

1. contentBase： 指定静态文件的根目录。Webpack Dev Server 将提供此目录中的所有文件。

2. compress： 启用 gzip 压缩以加速文件传输。

3. port： 指定服务器运行的端口，默认是 8080。

4. open： 自动打开浏览器并访问服务器地址。

5. hot： 启用热模块替换（HMR）。

6. watchContentBase： 监视 contentBase 目录下的文件变化，当文件变化时触发重载。

7. proxy： 配置代理，用于将特定 URL 的请求转发到其他服务器。例如，上面的配置会将所有 /api 开头的请求代理到 http://localhost:3000。

首先安装webpack dev server 

pnpm i -D webpack-dev-server

配置webpack.config.js 

  devServer: {
    // 开发服务器
    static: {
      directory: path.join(__dirname, "dist"), // 静态文件目录
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    // 监听html
    watchFiles: ["./src/**/*.html"],
  },

注意：静态文件目录如果存在二级目录，如：dist/html 这样就会不能正常浏览。还会出现 Cannot GET /

这样就可以不打包的情况下实现浏览