How to track changes in html with webpack?

Question

webpack

Hello. I have this build from babel, css-loader & style-loader + extract-text-webpack-plugin. Plus lies bootstrap and jquery.
Changes to jquery are counted and changed just as reactively as from browser-sync to gulp, but the web does not track changes in html, although everything was fine before connecting a certain module. Maybe I could have made a mistake somewhere, or is another module required? I will attach package.json and webpack.config.js in spoilers, if you need any more files - say.

package

{

"name": "lesson_boots",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "path": "^0.12.7",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1"
  }
}

webback.config.js

let path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let conf = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js',
    publicPath: 'dist/'
  },
  devServer: {
    overlay: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
};

module.exports = (env, options) => {
  let production = options.mode === 'production';

  conf.devtool = production
    ? false
    : 'eval-sourcemap';

  return conf;
}