Webpack vs Vite vs Rollup: JS Bundler Guide

// WEBPACK: Bundle-first architecture
// Bundles everything before serving, even in development
// webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: { filename: "bundle.js", path: __dirname + "/dist" },
  module: {
    rules: [
      { test: /\.jsx?$/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },
  devServer: {
    hot: true,
    port: 3000,
  },
};
 
// VITE: Native ESM in dev, Rollup for production
// vite.config.js
import { defineConfig } from "vite";
 
export default defineConfig({
  server: { port: 3000 },
  build: {
    rollupOptions: {
      output: { manualChunks: { vendor: ["react", "react-dom"] } },
    },
  },
});
 
// ROLLUP: Library-focused, best tree shaking
// rollup.config.js
export default {
  input: "src/index.js",
  output: [
    { file: "dist/bundle.cjs.js", format: "cjs" },
    { file: "dist/bundle.esm.js", format: "es" },
    { file: "dist/bundle.umd.js", format: "umd", name: "MyLib" },
  ],
  plugins: [resolve(), commonjs(), terser()],
};

// WHY VITE IS FASTER IN DEVELOPMENT
 
// Webpack (traditional approach):
// 1. Read ALL source files
// 2. Build complete dependency graph
// 3. Transform ALL modules (Babel, TypeScript, etc.)
// 4. Bundle into single file
// 5. Serve bundle to browser
// Time: O(total_modules) on every startup
 
// Vite (ESM approach):
// 1. Start server immediately
// 2. Browser requests index.html
// 3. Browser parses <script type="module" src="/src/main.ts">
// 4. Browser requests /src/main.ts
// 5. Vite transforms ONLY main.ts (using esbuild, 10-100x faster than Babel)
// 6. Browser follows imports, requests only what's needed
// Time: O(route_modules) - only modules for current page
 
// HMR comparison
// Webpack HMR: rebuild affected chunk -> send full chunk -> replace
// Vite HMR: transform single file -> send module update -> hot swap
// Vite HMR is independent of app size
 
// Practical benchmark (1000 module app):
// Webpack cold start: ~18 seconds
// Vite cold start: ~1.2 seconds (15x faster)
// Webpack HMR: ~2.5 seconds
// Vite HMR: ~50ms (50x faster)

// webpack.config.js - production optimized
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
module.exports = {
  mode: "production",
  entry: {
    app: "./src/index.js",
    vendor: ["react", "react-dom"],
  },
 
  output: {
    filename: "[name].[contenthash:8].js",
    chunkFilename: "[name].[contenthash:8].chunk.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
 
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { drop_console: true, passes: 2 },
          mangle: { safari10: true },
        },
        parallel: true,
      }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: "framework",
          priority: 20,
        },
        commons: {
          minChunks: 2,
          priority: 10,
          reuseExistingChunk: true,
        },
      },
    },
    runtimeChunk: "single",
  },
 
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { modules: false, useBuiltIns: "usage", corejs: 3 }],
              "@babel/preset-react",
            ],
            cacheDirectory: true,
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
 
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
    }),
  ],
};

// vite.config.js - production optimized
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
 
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    mode === "analyze" && visualizer({
      filename: "dist/stats.html",
      open: true,
      gzipSize: true,
    }),
  ].filter(Boolean),
 
  build: {
    target: "es2020",
    minify: "terser",
    sourcemap: true,
    cssMinify: true,
 
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
 
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            if (id.includes("react")) return "framework";
            if (id.includes("lodash")) return "vendor-lodash";
            return "vendor";
          }
        },
        chunkFileNames: "assets/[name]-[hash].js",
        entryFileNames: "assets/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash].[ext]",
      },
    },
 
    chunkSizeWarningLimit: 500,
  },
 
  server: {
    hmr: { overlay: true },
    proxy: {
      "/api": {
        target: "http://localhost:4000",
        changeOrigin: true,
      },
    },
  },
 
  resolve: {
    alias: {
      "@": "/src",
      "@components": "/src/components",
      "@utils": "/src/utils",
    },
  },
}));

// rollup.config.js - library build
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import terser from "@rollup/plugin-terser";
import { dts } from "rollup-plugin-dts";
import pkg from "./package.json" assert { type: "json" };
 
const external = [
  ...Object.keys(pkg.dependencies || {}),
  ...Object.keys(pkg.peerDependencies || {}),
];
 
export default [
  // Main build
  {
    input: "src/index.ts",
    external,
    output: [
      {
        file: pkg.main,
        format: "cjs",
        sourcemap: true,
        exports: "named",
      },
      {
        file: pkg.module,
        format: "es",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      terser(),
    ],
  },
  // Type declarations
  {
    input: "src/index.ts",
    output: { file: "dist/index.d.ts", format: "es" },
    plugins: [dts()],
  },
];

// Step 1: Install Vite
// npm install -D vite @vitejs/plugin-react
 
// Step 2: Create vite.config.js (maps webpack concepts)
 
// Webpack loaders -> Vite handles natively or via plugins
// style-loader + css-loader -> Built-in CSS support
// file-loader -> Built-in asset handling
// babel-loader -> esbuild (default) or @vitejs/plugin-react
 
// Webpack DefinePlugin -> Vite define option
// webpack: new webpack.DefinePlugin({ 'process.env.API_URL': JSON.stringify(url) })
// vite:
export default defineConfig({
  define: {
    "process.env.API_URL": JSON.stringify(process.env.API_URL),
  },
});
 
// Step 3: Move index.html to root (Vite requirement)
// Vite uses index.html as entry point, not a webpack HtmlPlugin template
// Add: <script type="module" src="/src/main.jsx"></script>
 
// Step 4: Update environment variables
// webpack: process.env.REACT_APP_*
// vite: import.meta.env.VITE_*
// Find and replace across codebase
 
// Step 5: Update require() to import
// Vite requires ES module syntax
// require("./style.css") -> import "./style.css"
// require("./logo.png") -> import logo from "./logo.png"
 
// Step 6: Handle Node.js globals
// Vite does not polyfill Node.js globals (process, Buffer, etc.)
export default defineConfig({
  define: {
    "process.env": {},
    global: "globalThis",
  },
});