STATIC MODULE BUNDLER

Bundle the web.

webpack packs many modules into a few bundled assets. Code splitting allows for loading parts of the application on demand — designed for modern JavaScript apps.

npm install webpack webpack-cli --save-dev
yarn add webpack webpack-cli --dev
pnpm add webpack webpack-cli -D
bun add -d webpack webpack-cli
deno add npm:webpack npm:webpack-cli
Get startedView on GitHub

35M+

weekly downloads

65K+

GitHub stars

11K+

plugins published

v5.109.2

current release

CONFIGURATION

Sensible defaults.
Configurable when you need it.

A single config file is enough for most projects. Compose loaders and transforms around any input, then reach for plugins when your build needs more control.

Loaders for any input

From CommonJS and ES modules to CSS, images, JSON, and custom assets—webpack turns source files into a coherent build pipeline.

  • Zero-config for common setups
  • Tree-shaking out of the box
  • Hot Module Replacement
  • Long-term caching with content hashes
const path = require('node:path');

module.exports = {
  entry: './src/index.cjs',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
};
JavaScript
import path from 'node:path';

export default {
  entry: './src/index.mjs',
  output: {
    filename: 'bundle.js',
    path: path.resolve(import.meta.dirname, 'dist'),
  },
  mode: 'production',
};
JavaScript
import path from 'node:path';
import { Configuration } from 'webpack';

export default {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(import.meta.dirname, 'dist'),
  },
  mode: 'production',
} satisfies Configuration;
TypeScript

WHY WEBPACK

Built for serious applications.

The original module bundler. Used by Vercel, Shopify, GitHub, Microsoft, and most of the modern frontend stack.

Module Federation

Share code across separately-deployed applications at runtime. The micro-frontend pattern, done right.

Code splitting

Split bundles by route, by demand, or by vendor. Load what's needed, when it's needed.

Tree shaking

Static analysis of ES modules eliminates dead code in production builds — automatically.

Hot module replacement

Edit and see the result without losing application state. The fastest feedback loop in JavaScript tooling.

Persistent caching

v5's filesystem cache makes warm builds near-instant. Cold builds are 38% faster than v4 on large monorepos.

11,000+ plugins

The largest ecosystem in JavaScript tooling. If a build problem exists, there's a webpack plugin for it.