webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    // Entry point
    entry: './src/js/main.js',

    output: {
      path: path.resolve(__dirname, 'www'),
      filename: 'js/bundle.js',
      clean: true, // Clean www/ before each build
    },

    module: {
      rules: [
        // CSS loader: extract CSS into separate bundle file
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
          ],
        },
      ],
    },

    plugins: [
      // Extract CSS into separate file
      new MiniCssExtractPlugin({
        filename: 'css/bundle.css',
      }),

      // Process index.html
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body',
        minify: isProduction ? {
          collapseWhitespace: true,
          removeComments: true,
          minifyCSS: true,
          minifyJS: true,
        } : false,
      }),

      // Copy static assets to www/
      new CopyWebpackPlugin({
        patterns: [
          // Solver page (copied as-is)
          { from: 'src/solver.html', to: 'solver.html' },
          // Animations
          { from: 'src/assets/anims', to: 'assets/anims', noErrorOnMissing: true },
          // Sounds
          { from: 'src/assets/sounds', to: 'assets/sounds', noErrorOnMissing: true },
          // PWA icons
          { from: 'src/assets/icons', to: 'assets/icons', noErrorOnMissing: true },
          // PWA manifest
          { from: 'src/manifest.json', to: 'manifest.json', noErrorOnMissing: true },
          // Service Worker (must be at root for scope)
          { from: 'src/sw.js', to: 'sw.js', noErrorOnMissing: true },
        ],
      }),
    ],

    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: isProduction, // Remove console.log in prod
            },
            mangle: isProduction,
          },
        }),
      ],
    },

    devtool: isProduction ? false : 'source-map',

    // Suppress performance warnings for large bundles
    performance: {
      hints: false,
    },
  };
};