Webpack Configuration (Alternative Approach)

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const isDev = process.env.NODE_ENV !== 'production';

/*
 * Webpack config for Shopify themes
 * Same output structure as Vite - direct to shopify-theme/assets/
 */
module.exports = {
  // 'development' enables helpful error messages, 'production' enables minification
  mode: isDev ? 'development' : 'production',

  // Single entry point - Webpack bundles all imports from here
  entry: './src/main.tsx',

  output: {
    filename: 'react-bundle.js',
    // Output directly to theme - no intermediate dist/ folder
    path: path.resolve(__dirname, 'shopify-theme/assets'),
    // CRITICAL: Don't delete other theme assets (images, fonts, etc.)
    clean: false,
  },

  // Source maps: 'eval-source-map' is fast for dev, 'source-map' is accurate for production
  devtool: isDev ? 'eval-source-map' : 'source-map',

  module: {
    rules: [
      // TypeScript and React - Babel handles both transpilation and JSX
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: 'defaults' }], // JS compatibility
              ['@babel/preset-react', { runtime: 'automatic' }], // JSX transform (no React import needed)
              '@babel/preset-typescript', // TypeScript → JavaScript
            ],
          },
        },
      },

      // CSS handling
      {
        test: /\.css$/,
        use: [
          // Dev: inject styles into DOM for fast refresh
          // Prod: extract to separate .css file for caching
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                // Only treat .module.css files as CSS Modules
                auto: true,
                // Dev: readable class names for debugging
                // Prod: short hashes for smaller files
                localIdentName: isDev
                  ? '[name]__[local]--[hash:base64:5]'
                  : '[hash:base64:8]',
              },
            },
          },
        ],
      },

      // Images: inline small ones as base64, emit large ones as files
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // Images under 4KB are inlined
          },
        },
        generator: {
          filename: 'react-images/[name][ext]',
        },
      },
    ],
  },

  resolve: {
    // Allow importing without extensions: import Button from './Button'
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
    // Path aliases - must match tsconfig.json paths
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@stores': path.resolve(__dirname, 'src/stores'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@types': path.resolve(__dirname, 'src/types'),
    },
  },

  plugins: [
    // Extract CSS to separate file (not inlined in JS)
    // Better for caching - CSS can be cached separately from JS
    new MiniCssExtractPlugin({
      filename: 'react-bundle.css',
    }),
  ],

  optimization: {
    minimizer: [
      // Minify JavaScript
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: !isDev, // Remove console.log in production
          },
        },
      }),
      // Minify CSS
      new CssMinimizerPlugin(),
    ],
  },

  // Cleaner terminal output
  stats: {
    colors: true,
    modules: false,  // Hide module-by-module details
    children: false, // Hide child compiler output
  },

  watchOptions: {
    ignored: /node_modules/, // Don't watch node_modules (performance)
    aggregateTimeout: 300,   // Wait 300ms after changes before rebuilding (debounce)
  },
};

/*
 * Code Splitting: Create separate bundles per page type
 * Reduces initial load since users only download code for their current page
 */
module.exports = {
  entry: {
    // Each key becomes a separate bundle
    main: './src/main.tsx',                    // Always loaded (header, cart drawer)
    product: './src/entries/product.tsx',      // Only on product pages
    collection: './src/entries/collection.tsx', // Only on collection pages
  },
  output: {
    // [name] is replaced with entry key: react-main.js, react-product.js, etc.
    filename: 'react-[name].js',
    path: path.resolve(__dirname, 'shopify-theme/assets'),
    clean: false,
  },
  plugins: [
    new MiniCssExtractPlugin({
      // CSS is also split per entry point
      filename: 'react-[name].css',
    }),
  ],
};

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
}

"paths": {
  "@/*": ["src/*"]
}