How to make webpack dev server restart when new files are added?

Question

webpack

Hello everyone, how can I make sure that when a new file (.pug) is added to the project, the webpack dev server is restarted and this page is available in the browser, and when files are deleted, the error that it cannot find the file that was removed ?

const LiveReloadPlugin = require('webpack-livereload-plugin');
const path = require('path');
const fs = require('fs');
const PATHS = {
  src: path.resolve(__dirname, 'src'),
  dist: path.resolve(__dirname, 'dist'),
}

const PAGES_DIR = `${PATHS.src}/page/`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'));

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

module.exports = {
  entry: {
    libs: [`${PATHS.src}/js/libs/index.js`],
    common: [`${PATHS.src}/js/index.js`],
    main: [`${PATHS.src}/sass/main.scss`]
  },
  output: {
    path: `${PATHS.dist}`,
    filename: 'js/[name].js',

  },
  plugins: [
    ...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`,
      filename: `${page.replace(/\.pug/,'.html')}`,
      inject: false
    })),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: 'css/[name].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
    new LiveReloadPlugin({
      appendScriptTag: true
    })
  ],
  module: {
    rules: [{
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.pug$/i,
        loaders: [{
            loader: "html-loader"
          },
          {
            loader: "pug-html-loader",
            options: {
              "pretty": true,
              "doctype": ""
            }
          }
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              config: {
                path: "postcss.config.js"
              }
            }
          },
          'sass-loader'
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }]
      }
    ]
  },
  devServer: {
    contentBase: "./src/",
    compress: true,
    watchContentBase: true,
    inline: true,
    historyApiFallback: true,
    disableHostCheck: true,
    stats: {
      colors: true,
      modules: false,
      chunks: false,
      chunkGroups: false,
      chunkModules: false,
      env: true,
    },
    port: 9000
  }
};

Thanks in advance.