Module Bundlers: Webpack, Parcel & Vite

// webpack.config.js - Basic Webpack Configuration
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // Entry point - where bundler starts
  entry: "./src/index.js",

  // Output configuration
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true // Clean /dist folder before each build
  },

  // Development or prod
...

// webpack.config.js - Production Optimization
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  mode: "production",
  
  // Multiple entry points for large apps
  entry: {
    main: "./src/main.js",
    admin: "./src/admin.js",
    analytics: "./src/analytics.js"
  },

  output: {
    filename: "[name].[contenthash].js",
    path: __
...

// vite.config.js - Vite Configuration
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  // Plugins
  plugins: [react()],

  // Path aliases
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@components": resolve(__dirname, "src/components"),
      "@utils": resolve(__dirname, "src/utils")
    }
  },

  // Development server
  server: {
    port: 3000,
    open: true,
    // Proxy A
...

// Writing a Custom Vite Plugin
function myVitePlugin() {
  return {
    name: "my-vite-plugin",

    // Runs during config resolution
    config(config, { command }) {
      console.log("Building for:", command);
    },

    // Transform source code
    transform(code, id) {
      // Convert .txt files to JS modules
      if (id.endsWith(".txt")) {
        return {
          code: `export default ${JSON.stringify(code)}`,
          map: null
        };
      }
    },

    // Modify the HTML
   
...

// Code Splitting with Dynamic Imports

// 1. Route-based code splitting
const routes = [
  {
    path: "/",
    // Lazy load the home page
    component: () => import("./pages/Home.js")
  },
  {
    path: "/dashboard",
    // Lazy load dashboard (admin only)
    component: () => import("./pages/Dashboard.js")
  },
  {
    path: "/settings",
    component: () => import("./pages/Settings.js")
  }
];

// 2. Feature-based code splitting
async function loadChartLibrary() {
  // Only load heavy libra
...

// Tree Shaking - Dead Code Elimination

// ❌ BAD: Imports entire library (no tree shaking)
import _ from "lodash";
const result = _.map([1, 2, 3], x => x * 2);

// ✅ GOOD: Import only what you need (tree shakeable)
import { map } from "lodash-es";
const result = map([1, 2, 3], x => x * 2);


// ❌ BAD: Side effects prevent tree shaking
export function usefulFunction() {
  return "I am useful";
}

export function unusedFunction() {
  return "I am never used";
}

// Side effect - runs when module 
...

// Hot Module Replacement (HMR)

// How HMR works internally:
// 1. You edit a file
// 2. Bundler compiles JUST that file
// 3. Sends update via WebSocket
// 4. Browser replaces the module
// 5. State is preserved (no page refresh!)


// Vite - HMR is automatic for most files
// For custom HMR handling:
if (import.meta.hot) {
  // Accept updates for this module
  import.meta.hot.accept((newModule) => {
    console.log("Module updated!", newModule);
  });

  // Clean up before module is replaced

...

// Environment Variables in Bundlers

// Vite - Uses import.meta.env
// .env file:
// VITE_API_URL=https://api.example.com
// VITE_DEBUG=true

// Access in code:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_DEBUG);
console.log(import.meta.env.MODE); // "development" or "production"
console.log(import.meta.env.DEV);  // true in dev
console.log(import.meta.env.PROD); // true in production


// Webpack - Uses DefinePlugin
// webpack.config.js
const webpack = require("
...

// Webpack Module Federation (Microfrontends)

// Host Application - webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      
      // Import modules from remote apps
      remotes: {
        // "internal name": "remote_name@URL"
        headerApp: "header@http://localhost:3001/remoteEntry.js",
        productApp: "products@http://localhost:3002/remoteEntr
...

// Server-Side Rendering (SSR) Build Configuration

// Vite SSR - vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // SSR entry point
    ssr: true,
    rollupOptions: {
      input: "./src/entry-server.js"
    }
  },
  
  ssr: {
    // Don't bundle these (use Node.js require)
    noExternal: ["some-package-to-bundle"]
  }
});

// entry-server.js - Server entry point
import { renderToString } from "react-dom/server";
import App from "./App";

expo
...

// Parcel - Zero Configuration Bundler

// No config file needed! Just run:
// npx parcel index.html

// Parcel automatically detects and handles:
// - JavaScript/TypeScript
// - JSX/TSX
// - CSS/SCSS/LESS
// - Images and fonts
// - HTML

// Optional .parcelrc for customization
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "optimizers": {
    "*.js": ["@parcel/optimizer-terser"]
  }
}


// package.json scripts
{
  "scripts": {

...

// Bundler Feature Comparison

/*
┌─────────────────┬──────────────┬──────────────┬──────────────┐
│ Feature         │ Webpack      │ Vite         │ Parcel       │
├─────────────────┼──────────────┼──────────────┼──────────────┤
│ Configuration   │ Complex      │ Minimal      │ Zero-config  │
│ Dev Server      │ Slow         │ FASTEST      │ Fast         │
│ Build Speed     │ Slow         │ Fast         │ Fast         │
│ HMR             │ Config req.  │ Instant      │ Built-in     │
│ Code Spli
...