website/frontend/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const path = require('path');
const glob = require('glob');
const isDev = process.argv.includes('--mode=development');
const pages = glob.sync(__dirname + '/src/pages/**/markup.sxml');

module.exports = {
  target: 'web',
  entry: pages.reduce((entries, pagePath) => {
    const pathSegments = pagePath.split('/');
    const pageName = pathSegments[pathSegments.length - 2];
    const scriptPath = pagePath.replace('markup.sxml', 'script.js');

    entries[pageName] = ['./src/main.js', scriptPath];
    return entries;
  }, {}),
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devtool: false,
  devServer: {
    static: {
      directory: './dist/',
      publicPath: '/',
    },
    client: {
      overlay: {
        errors: true,
        warnings: false,
      }
    },
    hot: true,
    compress: false,
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.sxml$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false,
            },
          },
          {
            loader: 'sxml-loader',
          },
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },
      {
        test: /\.(png|jpg|svg|jpeg|gif|webp)/i,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
          outputPath: 'assets',
          publicPath: 'assets/',
        },
      },
      {
        test: /\.(ttf|woff|woff2)/i,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
          outputPath: 'assets',
          publicPath: 'assets/',
        },
      },
    ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public'),
        }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    ...pages.map((fpath) => {
      const pagePath = fpath.split('/pages/')[1];
      const pagePathSegs = pagePath.split('/');
      const pageName = pagePathSegs[pagePathSegs.length - 2];

      return new HtmlWebpackPlugin({
        inject: 'body',
        scriptLoading: 'blocking',
        template: fpath,
        filename: pagePath.replace('/markup.sxml', '.html'),
        minify: false,
        chunks: [pageName],
      });
    }),
  ],
}