Webpack is a module bundler. It takes all your JavaScript files, CSS, images, and other assets, figures out how they depend on each other, and combines them into a small number of optimized files that browsers can load efficiently.

Why bundling exists

Browsers can’t efficiently load 500 separate JavaScript files. Webpack combines them into one or a few bundles:

src/
  index.js (imports utils.js, api.js)
  utils.js (imports helpers.js)
  api.js
  helpers.js
  styles.css
  logo.png

→ Webpack →

dist/
  bundle.js      (all JS combined + minified)
  styles.css     (processed CSS)
  logo.abc123.png (optimized + hashed)

Core concepts

Entry — where Webpack starts building the dependency graph (usually src/index.js).

Output — where the bundled files go (usually dist/).

Loaders — transform non-JS files so Webpack can understand them. CSS, images, TypeScript all need loaders.

Plugins — do everything else: minification, HTML generation, environment variables, bundle analysis.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: __dirname + '/dist' },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.tsx?$/, use: 'ts-loader' },
    ],
  },
};

Webpack vs. modern alternatives

Webpack dominated for years but newer tools are faster:

Tool	Speed	Config	Best for
Webpack	Slow	Complex	Legacy projects, max flexibility
Vite	Fast	Minimal	New projects, dev experience
esbuild	Fastest	Minimal	Libraries, simple builds
Turbopack	Fast	Webpack-compatible	Next.js projects

When you’ll encounter Webpack

• Older React projects (Create React App uses Webpack)
• Enterprise codebases
• Projects needing very specific build customization
• Next.js (uses Webpack internally, migrating to Turbopack)

For new projects, most developers choose Vite instead. See What is Vite? for the modern alternative.