// webpack.config.js — the configuration file Webpack reads
const path = require("path");

module.exports = {
    // Entry — where Webpack starts building the dependency graph
    entry: "./src/index.js",

    // Multiple entry points — for multi-page applications
    entry: {
        main: "./src/index.js",
        admin: "./src/admin/index.js",
        vendor: ["react", "react-dom"]   // Separate vendor bundle
    },

    // Output — where Webpack writes the finished bundles
    output: {
        path: path.resolve(__dirname, "dist"),      // Absolute path required
        filename: "[name].[contenthash].bundle.js", // [name] = entry key, [contenthash] = unique hash
        clean: true                                  // Delete old files before each build
    },

    // Mode — tells Webpack to optimize for development or production
    mode: "production"   // "development" | "production" | "none"
};

development mode:
→ Fast build (no minification)
→ Source maps enabled (readable error locations)
→ Detailed error messages
→ NOT optimized for file size

production mode:
→ Minification (removes whitespace, shortens variable names)
→ Tree shaking (removes unused code)
→ Scope hoisting (improves execution speed)
→ Optimized for smallest possible bundle size

# Install common loaders
npm install --save-dev \
    babel-loader @babel/core @babel/preset-env @babel/preset-react \
    css-loader style-loader \
    sass-loader sass \
    ts-loader typescript \
    file-loader \
    url-loader

// webpack.config.js — configuring loaders
module.exports = {
    module: {
        rules: [
            // JavaScript and JSX — transform with Babel
            {
                test: /\.(js|jsx)$/,          // Files ending in .js or .jsx
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            },

            // TypeScript — transform with ts-loader
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: "ts-loader"
            },

            // CSS — process and inject into DOM
            {
                test: /\.css$/,
                use: [
                    "style-loader",   // Injects CSS into <style> tags (dev)
                    "css-loader"      // Resolves @import and url() in CSS
                ]
            },

            // Sass/SCSS — compile then process as CSS
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
                // Loaders execute RIGHT TO LEFT:
                // sass-loader → css-loader → style-loader
            },

            // Images — handle image imports
            {
                test: /\.(png|jpg|jpeg|gif|svg|webp)$/i,
                type: "asset/resource",        // Webpack 5 built-in asset handling
                generator: {
                    filename: "images/[name].[hash][ext]"
                }
            },

            // Fonts
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
                generator: { filename: "fonts/[name].[hash][ext]" }
            }
        ]
    }
};

import styles from "./App.css";

Webpack sees this import → runs css-loader (resolves CSS imports)
                         → runs style-loader (injects into DOM)
                         → Bundle includes the CSS as a JavaScript module

npm install --save-dev \
    html-webpack-plugin \
    mini-css-extract-plugin \
    css-minimizer-webpack-plugin \
    terser-webpack-plugin \
    webpack-bundle-analyzer \
    copy-webpack-plugin \
    dotenv-webpack

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const webpack = require("webpack");

module.exports = {
    plugins: [
        // Generate index.html automatically with bundle script tags
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "My App",
            favicon: "./public/favicon.ico",
            minify: { removeComments: true, collapseWhitespace: true }
        }),

        // Extract CSS into separate .css files (instead of injecting via JS)
        new MiniCssExtractPlugin({
            filename: "styles/[name].[contenthash].css"
        }),

        // Define environment variables accessible in your code
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
            "process.env.API_URL": JSON.stringify(process.env.API_URL)
        }),

        // Analyze bundle size — opens visual treemap in browser
        // Use only when analyzing: new BundleAnalyzerPlugin()
    ],

    optimization: {
        minimizer: [
            new TerserPlugin(),          // Minify JavaScript
            new CssMinimizerPlugin()     // Minify CSS
        ]
    }
};

// Without code splitting:
// All code in one bundle → user downloads 2MB even for simple pages

// With code splitting:
// Core: 200KB (loads immediately)
// Dashboard: 400KB (loads only when user visits /dashboard)
// Analytics: 300KB (loads only when user visits /analytics)

// Method 1: Dynamic import() — the recommended approach
// Route-based code splitting with React
import React, { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const HomePage     = lazy(() => import("./pages/HomePage"));
const Dashboard    = lazy(() => import("./pages/Dashboard"));
const Analytics    = lazy(() => import("./pages/Analytics"));

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/"          element={<HomePage />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/analytics" element={<Analytics />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}
// Webpack automatically splits each lazy() import into a separate chunk

// Method 2: SplitChunksPlugin — vendor bundle separation
module.exports = {
    optimization: {
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                // Separate vendor bundle for better caching
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    priority: 10
                },
                // Separate React into its own cached chunk
                react: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: "react",
                    priority: 20
                }
            }
        }
    }
};