Webpack

What is Webpack?

Webpack is a module bundler for JavaScript applications. It takes your source files — JS, CSS, images, fonts — and outputs optimised bundles ready for the browser. For years it was the standard build tool for any serious frontend project, and it's still widely used even as newer alternatives like Vite have grown in popularity.

How the dependency graph works

Webpack starts from one or more entry points and traces every import and require statement to build a complete dependency graph of your project. It then processes each module through the appropriate loaders and outputs one or more bundles. This means you can import CSS from JavaScript, use TypeScript without a separate compilation step, and reference assets directly in your components.

Loaders and plugins

Loaders handle individual file types — babel-loader transpiles modern JS, css-loader processes stylesheets, file-loader handles images. Plugins operate on the output and can do things like extract CSS into separate files, generate an HTML file, or optimise and minify the bundle. The combination gives you fine-grained control over everything the build does.

Code splitting

Webpack can split your bundle into multiple chunks that are loaded on demand. This keeps the initial page load small by deferring code that isn't needed immediately. Dynamic imports let you trigger code splitting at the component level, which is how most modern frameworks implement lazy loading.

Webpack vs the alternatives

Webpack is slower than newer tools like Vite for development because it bundles everything upfront. Vite uses native ES modules in the browser during development and is significantly faster to start. For production builds the gap is smaller, but the ecosystem has shifted. New projects often start with Vite; Webpack remains the right choice when you need its specific capabilities or are maintaining an existing project.