{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreif7bj6vde2q26ktxbn7oue6h6pyi3nfcwrunbisgfoicu2tls45la",
    "uri": "at://did:plc:5sgu76a53rz3n6unbykmovqy/app.bsky.feed.post/3mlpojohctr42"
  },
  "description": "Webpack is a JavaScript module bundler that takes a project's source files (JS, CSS, images, fonts) and produces optimised static assets for the browser. Webpack defined the modern front-end build pipeline and dominated for nearly a decade; today it is being displaced by newer bundlers (Vite, esbuild, Turbopack, Rspack) but remains in use across a large installed base.\n\n\nCore concepts\n\n * Entry. One or more files where the dependency graph begins.\n * Output. Where bundled files are written and h",
  "path": "/engineering-glossary/webpack-module-bundler/",
  "publishedAt": "2026-05-20T00:00:00.000Z",
  "site": "https://sahilkapoor.com",
  "tags": [
    "Vite",
    "React",
    "TypeScript",
    "JSX"
  ],
  "textContent": "**Webpack** is a JavaScript module bundler that takes a project's source files (JS, CSS, images, fonts) and produces optimised static assets for the browser. Webpack defined the modern front-end build pipeline and dominated for nearly a decade; today it is being displaced by newer bundlers (Vite, esbuild, Turbopack, Rspack) but remains in use across a large installed base.\n\n## Core concepts\n\n  * **Entry.** One or more files where the dependency graph begins.\n  * **Output.** Where bundled files are written and how they are named.\n  * **Loaders.** Transform files of different types (babel-loader for ES future syntax, css-loader for CSS, file-loader for assets).\n  * **Plugins.** Augment the bundling process (HtmlWebpackPlugin, MiniCssExtractPlugin, DefinePlugin).\n  * **Code splitting.** Produce multiple chunks for dynamic imports, vendor splits, route-level lazy loading.\n  * **Tree shaking.** Remove unused ES module exports from production bundles.\n\n\n\n## Modern alternatives and successors\n\n  * **Vite + Rollup / Rolldown.** Dev with native ESM, build with Rollup.\n  * **esbuild.** Extremely fast bundler in Go; often used as a sub-tool inside other tools.\n  * **Turbopack.** Vercel's Rust-based successor to Webpack, default in Next.js.\n  * **Rspack.** Rust port of Webpack's API by ByteDance; drop-in for many projects.\n  * **Parcel.** Zero-config bundler with good DX.\n\n\n\n🔗\n\n**Related Terms**\nVite, React, TypeScript, JSX.",
  "title": "Webpack",
  "updatedAt": "2026-05-13T19:13:54.781Z"
}