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.0

current release

CONFIGURATION

Sensible defaults. Configurable when you need it.

A single config file is enough for most projects. Compose loaders to transform any input; reach for plugins when behavior is non-trivial.

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

Loaders for any input

Through loaders, modules can be CommonJS, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS — and your custom stuff.

  • Zero-config for common setups
  • Tree-shaking out of the box
  • Hot Module Replacement
  • Long-term caching with content hashes

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.