How to disable pug html minification in webpack?

Question

HTML

I still can’t figure out how in the final assembly of the bundle on the production build, not to minify the html files?

const path = require("path");
const fs = require("fs");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const LiveReloadPlugin = require("webpack-livereload-plugin");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");


const ASSET_PATH = process.env.ASSET_PATH || "/";

const PATHS = {
  src: path.join(__dirname, "./src"),
  dist: path.join(__dirname, "./dist"),
  assets: path.join(__dirname, "./src"),
};

const PAGES = fs
  .readdirSync(PATHS.src + "/views/")
  .filter((fileName) => fileName.endsWith(".pug"));

module.exports = {
  mode: "development",
  devtool: 'source-map',
  entry: {
    main: path.resolve(__dirname + "/src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].bundle.js",
    publicPath: "/",
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: "vendors",
          test: /node_modules/,
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: "pug-loader",
        options: {
          query: { pretty: true },
        },
      },
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: { sourceMap: true },
          },
          { loader: "postcss-loader", options: { sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } },
          {
            loader: "sass-resources-loader",
            options: {
              resources: [
                path.resolve("./src/scss/base/_mobile.scss"),
                path.resolve("./src/scss/base/_vars.scss"),
                path.resolve("./src/scss/global.scss"),
              ],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]",
              outputPath: "/",
              publicPath: "/",
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              context: "../",
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
      // {
      //   test: /\.html$/i,
      //   loader: "html-loader",
      //   options: {
      //     minimize: false,
      //   },
      // },
    ],
  },
  devServer: {
    // contentBase: path.resolve(__dirname, './dist'),
    hot: true,
    inline: true,
    lazy: false,
    overlay: {
      warnings: true,
      errors: true,
    },
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin(),
    // new ESLintPlugin({}),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: PATHS.src + "/images/content/",
          to: PATHS.dist + "/images/content/",
          globOptions: {
            ignore: ["*.DS_Store"],
          },
          noErrorOnMissing: true,
        },
      ],
    }),
    // new ImageMinimizerPlugin({
    //   minimizerOptions: {
    //     // Lossless optimization with custom option
    //     // Feel free to experiment with options for better result for you
    //       plugins: [
    //         ["gifsicle", { interlaced: true }],
    //         ["jpegtran", { progressive: true }],
    //         ["optipng", { optimizationLevel: 5 }],
    //         // Svgo configuration here https://github.com/svg/svgo#configuration
    //         [
    //           "svgo",
    //           {
    //             plugins: extendDefaultPlugins([
    //               {
    //                 name: "removeViewBox",
    //                 active: false,
    //               },
    //               {
    //                 name: "addAttributesToSVGElement",
    //                 params: {
    //                   attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
    //                 },
    //               },
    //             ]),
    //           },
    //         ],
    //         ],
    //       },
    // }),
    new LiveReloadPlugin({
      appendScriptTag: true,
    }),
    // ...PAGES.map(
    //   (page) =>
    //     new HtmlWebpackPlugin({
    //       template: `${PATHS.src + "/views/"}/${page}`,
    //       filename: `./${page.replace(/\.pug/, ".html")}`,
    //     })
    // ),
    ...PAGES.map(
      (page) =>
        new HtmlWebpackPlugin({
          template: `${PATHS.src + "/views/"}/${page}`,
          filename: `./${page.replace(/\.pug/, ".html")}`,
          minify: false,
        }),
    ),
  ],
};

Answer 1

There should be a pug option called `pretty` but it's deprecated now.
Now I use a separate gulp-beautify plugin for this. Look at something similar for Webpack.

Answer 2

For future reference:
If you're using pug-loader, then
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true,
},
}