Why is html not updating when using hmr devServer?

Question

webpack

I'm using webpack 5.51.1 and webpack-dev-server 4.0.0 , configured hmr, but it only updates css and js (hmr doesn't work with js, only live reload, same question). But devServer doesn't update html at all, tried many solutions, here are some of them that didn't work:
1. 2. 3.target="web"
hot="true"

if (module.hot) {
  module.hot.accept();
}

folder structure:


webpack.dev.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: './index.js'
  },
  output: {
    filename: '[name].js',
    clean: true
  },
  devServer: {
    open: true
  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './html/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ]
};

Answer 1

if (module.hot) {
  module.hot.accept();
  // вот тут должна быть логика по замене старого модуля на новый
}

For css, this logic is added by css-loader
For js - there is a standard behavior - live reload
For html - in your case, html is not a full-fledged module from the point of view of webpack, because you have HtmlWebpackPlugin, which works as if from the side, taking only its hooks from webpack