How not to include html code in bundle.js?

Question

Building projects

There is a basic webpack configuration, compilation from .pug to .html using pug-loader and extracting html into a separate file using html-webpack-plugin. But if you look into the final bundle, then all html files will be included in this file, although they should be separated into a separate one. That is, it is allocated to a separate html file, but is not removed from the javascript bundle. How to make html stand out in a separate file and removed from the bundle with js code?

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const PATHS = {
  src: './src',
  dist: './dist'
}
const PAGES_DIR = `${PATHS.src}/pages/layouts`;
const PAGES = fs.readdirSync(PAGES_DIR);

module.exports = {
  entry: [
    `${PATHS.src}/js/main.js`,
    `${PATHS.src}/assets/sass/main.sass`,
    ...PAGES.map(filename => `${PAGES_DIR}/${filename}`)
  ],
  output: {
    filename: './js/bundle.js',
    path: path.resolve(__dirname, `.${PATHS.dist}`)
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader', options: { url: false } },
          { loader: 'postcss-loader', options: { config: { path: './postcss.config.js' } } },
          { loader: 'sass-loader' }
        ]
      }, 
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      },
      {
        test: /\.(png|jpg|jpeg|svg)/,
        loader: 'file-loader',
        options: { name: '[name].[ext]' }
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'file-loader',
          options: { name: '[name].[ext]' }
        }
      }
    ]
  },
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: './css/[name].css' }),
    ...PAGES.map(filename => {
      return new HtmlWebpackPlugin({
        filename: filename.replace(/pug$/, 'html'),
        template: `${PAGES_DIR}/${filename}`
      })
    }),
    new CopyWebpackPlugin([
      { from: `${PATHS.src}/assets/fonts`, to: `./fonts` },
      { from: `${PATHS.src}/assets/img`, to: './img' },
      { from: `${PATHS.src}/other/`, to: './' }
    ])
  ],
  stats: false
}