webpack

Webpack is an open-source JavaScript module bundler primarily for web applications. It analyzes a project's dependency graph and generates static assets that represent those modules, typically a small set of bundles that can be loaded by a browser. Webpack was created by Tobias Koppers and released in 2012 as a tool to resolve dependency management and asset compilation for complex JavaScript apps.

At its core, webpack takes one or more entry points and produces output bundles. It processes modules using loaders to transform non-JS assets such as TypeScript, JSX, CSS, images, and fonts into modules that can be included in the bundle. The behavior is extended by plugins that hook into the build lifecycle to optimize, minify, or inject resources.

Webpack resolves dependencies via a graph, enables code splitting with dynamic import, and supports tree shaking to remove unused code. It supports source maps and various optimization strategies for production builds. The configuration is expressed in a JavaScript file named webpack.config.js, describing entry points, output options, module rules, and plugin instances.

The ecosystem offers a wide range of loaders and plugins, including Babel integration (babel-loader), CSS handling (css-loader and style-loader or mini-css-extract-plugin), and HTML generation (html-webpack-plugin). It is commonly used with frameworks such as React, Vue, or Angular, often as part of a larger build system.

While Webpack remains widely used, its complexity has motivated alternatives and newer tooling that emphasize simpler configuration or faster development builds, such as Rollup, Parcel, esbuild, and Vite. Webpack continues to evolve, with major versions adding performance improvements and modern features.