text: const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
    entry: "./src/app.js",
  
    output: {
      path: path.resolve(__dirname, "../dist"),
      filename: "js/bundle.js",
    },
  
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.pug",
        minify: {
          html5: true,
          collapseWhitespace: true,
          caseSensitive: true,
          removeComments: true,
          removeEmptyElements: true,
        },
      }),
      new MiniCssExtractPlugin({
        filename: "[name]-styles.css",
        chunkFilename: "[id].css",
      }),
    ],
  
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: ["pug-loader"],
        },
        {
          test: /\.styl$/i,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "stylus-loader",
          ],
        },
        {
          test: /\.(jpg|png|gif)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                outputPath: "static/",
                useRelativePath: true,
              },
            },
            {
              loader: "image-webpack-loader",
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: "65-90",
                  speed: 4,
                },
                gifsicle: {
                  interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                  quality: 75,
                },
              },
            },
          ],
        },
      ],
    },
  };
  