const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { htmlWebpackPluginTemplateCustomizer }  = require('template-ejs-loader')

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const hpGallery = require('./src/pages/home/gallery.js');
const brandName = 'BIAMMA Solutions';
const globalVars = {
  brandName: brandName,
  mailTo: 'tobedefined@email.com'
};

module.exports = {
  entry: {
    commons: './src/js/commons.js',
    home: './src/js/home.js',
    'contact-us': './src/js/contact-us.js',
    portfolio: './src/js/portfolio.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'public'),
  },
  stats: {
    children: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.ejs$/i,
        use: ['html-loader', 'template-ejs-loader'],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/robots.txt', to: '' }, // Copia nella directory di output
        { from: 'blocksy', to: 'blocksy' },
        { from: 'src/assets', to: 'assets'}
      ]
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-index',
            bodyContentEjs: '../pages/home/body.ejs',
            title: brandName + ' | Soluzioni Digitali su Misura per il Tuo Business',
            metaDescription: brandName + " è un'agenzia web specializzata in sviluppo di siti. Scopri come possiamo potenziare la tua presenza online. Richiedi una consulenza gratuita."
          }
        }
      }),
      chunks: ['commons', 'home'],
      scriptLoading: 'defer',
    }),
    new HtmlWebpackPlugin({
      filename: '404.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-404',
            bodyContentEjs: '../pages/404/body.ejs',
            title: 'Pagina Non Trovata | ' + brandName,
            customHeadlibsEjs: '../pages/404/customHeadlibs.ejs',
            description: 'La pagina che stai cercando non esiste.'
          }
        }
      })
    }),
    new HtmlWebpackPlugin({
      filename: 'contatti.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-contacts',
            bodyContentEjs: '../pages/contactus/body.ejs',
            title: 'Contattaci - Realizziamo il tuo progetto web | ' + brandName,
            metaDescription: "Hai un'idea per un sito web? Contatta la nostra web agency e trasformiamo insieme le tue idee in realtà digitale. Sviluppiamo siti web su misura per il tuo business."
          }
        }
      }),
      chunks: ['commons', 'contact-us']
    }),
    new HtmlWebpackPlugin({
      filename: 'portfolio.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-portfolio',
            bodyContentEjs: '../pages/portfolio/body.ejs',
            title: 'Portfolio - Realizziamo il tuo progetto web | ' + brandName,
            metaDescription: "Hai un'idea per un sito web? Contatta la nostra web agency e trasformiamo insieme le tue idee in realtà digitale. Sviluppiamo siti web su misura per il tuo business.",
            cards: hpGallery.cards,
            filters: hpGallery.filters
          }
        }
      }),
      chunks: ['commons', 'portfolio']
    }),
    new HtmlWebpackPlugin({
      filename: 'privacy-policy.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-privacy-policy',
            bodyContentEjs: '../pages/privacy-policy/body.ejs',
            title: 'Informativa sulla Privacy | ' + brandName,
            metaDescription: "Leggi l'Informativa sulla Privacy di " + brandName + " per comprendere come gestiamo e proteggiamo le tue informazioni personali."
          }
        }
      }),
      chunks: ['commons']
    }),,
    new HtmlWebpackPlugin({
      filename: 'cookie-policy.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-cookie-policy',
            bodyContentEjs: '../pages/cookie-policy/body.ejs',
            title: 'Informativa sui Cookie | ' + brandName,
            metaDescription: "La nostra politica sui cookie spiega l'uso dei cookie su " + brandName + " . Scopri come controllare e gestire le preferenze dei cookie."
          }
        }
      }),
      chunks: ['commons']
    }),
  ],
  devServer: {
    static: {
        directory: path.join(__dirname, 'public')
    },
    compress: true,
    port: 9900,
    hot: true,
    watchFiles: ['./src/**/*.ejs'],
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ]
  },
};


with above webpack v5 config I need to add inside my html head tag the css coming from generated css file "/commons.css" (generated becaouse of entry commons: './src/js/commons.js') or directly from file src/css/commons.css
how can i do it?