Как не включать html код в bundle.js?

Question

[Егор Бабинцев]

Есть базовая конфигурация webpack, настроена компиляция из .pug в .html при помощи pug-loader и выделение html в отдельный файл при помощи html-webpack-plugin. Но если заглянуть в итоговый bundle, то все html файлы окажутся включенными в этот файл, хотя должны быть выделены в отдельный. То есть в отдельный файл html выделяется, но не убирается из бандла с javascript'ом. Как сделать так, чтобы html выделялся в отдельный файл и убирался из бандла с js кодом?

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
}