webpack

webpack is a module bundler. Starting from one or more entry files, it follows every import or require, builds a dependency graph and writes out bundles the browser can load. Loaders let it process other file types such as CSS, images and TypeScript, and plugins extend the build.

Why it matters

For years webpack was the default way to ship modern front-end code. It enables code splitting, so users download only the JavaScript a route needs, plus minification, tree shaking and content-hashed filenames for long-term caching. Many frameworks used it internally. Newer tools such as Vite start faster in development, but large existing projects still depend on webpack.

Example

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: '[name].[contenthash].js' },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
  },
};

The hash in the filename changes only when the content changes, so browsers can cache bundles for a long time.

Common mistakes

• Shipping one giant bundle instead of splitting by route.
• Leaving development mode and source maps on in production.
• Configuring loaders in the wrong order; they run from last to first.

Related

• Bundler
• Tree shaking
• Minification
• Vite

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.