webpack: Loaders, Plugins, Code Splitting & Module Federation

Q: How do I migrate from webpack to Vite?

Move index.html to the project root, replace loaders with Vite plugins or built-in support, convert process.env usage to import.meta.env, and verify dynamic imports and aliases. For very large apps, Rspack offers a lower-effort path with near-drop-in compatibility.

webpack

webpack is a module bundler: starting from one or more entry points, it follows every import and require to build a dependency graph, runs each file through loaders (TypeScript, CSS, images), applies plugins (HTML generation, minification, environment variables), and emits optimized bundles for the browser. For most of the 2015–2022 era it was the way to build front-end applications, and it still powers a large share of production codebases, including many Create React App and Angular projects.

Newer tools like Vite and Rspack have taken over most greenfield projects because they're faster and need less configuration. webpack remains relevant because it's extremely configurable, has an enormous plugin ecosystem, and introduced features — like Module Federation — that other tools now copy.

TL;DR

webpack builds a dependency graph from entry points and writes bundles to output.
Loaders transform individual files; plugins hook into the whole compilation.
Use mode: "production" for minification, tree shaking, and scope hoisting.
Code splitting with dynamic import() and splitChunks keeps initial bundles small.
[contenthash] filenames enable long-term browser caching.
Module Federation lets separately deployed apps share code at runtime (micro-frontends).
For new projects, prefer Vite; for large webpack codebases, consider Rspack as a faster, compatible replacement.

Quick Example

A production-ready configuration for a TypeScript React app:

Run webpack --mode production to build or webpack serve --mode development for the dev server with hot module replacement.

Core Concepts

Entry, Output, and the Dependency Graph

The entry is where webpack starts resolving imports. Everything reachable becomes part of the graph; everything else is ignored. The output controls where bundles go and how they're named. Multiple entries produce multiple bundles (for example, an app and an admin panel).

Loaders

Loaders transform a file before it's added to the graph. They run right to left in a use array:

Plugins

Plugins tap into compilation hooks to do things loaders can't: generate index.html (HtmlWebpackPlugin), extract CSS files, define environment constants (DefinePlugin), copy static files, analyze bundles (webpack-bundle-analyzer), or compress output.

Modes and Optimization

mode: "production" enables minification (Terser), tree shaking of unused ESM exports, scope hoisting, and process.env.NODE_ENV = "production". Tree shaking only works with ES modules and packages that declare "sideEffects": false in package.json.

Code Splitting

Dynamic imports — import("./Settings") creates a separate chunk loaded on demand, the basis of route-level lazy loading.
splitChunks — pulls shared and vendor modules into separate chunks so they're cached independently.
runtimeChunk: "single" — isolates webpack's runtime so app changes don't invalidate vendor hashes.

Caching

Use [contenthash] in filenames so a file's name changes only when its content does; serve those files with long Cache-Control max-age headers. In webpack 5, cache: { type: "filesystem" } persists build caches between runs and dramatically speeds up rebuilds.

Module Federation

Module Federation lets one build expose modules and another consume them at runtime, with shared dependencies like React loaded once. It's the most widely used mechanism for micro-frontends, where independent teams deploy parts of one UI separately.

Best Practices

Split Configuration by Environment

Keep development settings (fast source maps, HMR) separate from production (minification, content hashes), either with a function config like above or webpack-merge.

Measure Before Optimizing

Run webpack-bundle-analyzer to see what's in each chunk. Large accidental imports — a whole icon library or a locale bundle — are the usual culprits.

Enable Persistent Caching

cache: { type: "filesystem" } often cuts rebuild times by an order of magnitude on large projects.

Use Faster Transpilers

Swap babel-loader/ts-loader for swc-loader or esbuild-loader, and run type checking in parallel with fork-ts-checker-webpack-plugin.

Lazy-Load Routes and Heavy Features

Dynamic import() for routes, editors, and charting libraries keeps the initial bundle small and improves web performance.

Common Mistakes

Shipping Development Builds

Forgetting --mode production leaves unminified code and React's development checks in production — often several times larger and slower.

Filenames Without Content Hashes

Fixed names like bundle.js force users to re-download everything or, worse, serve stale code from caches.

Breaking Tree Shaking With CommonJS

Importing CommonJS builds or libraries with side effects prevents unused code removal. Prefer ESM builds and named imports.

Source Maps Exposed Unintentionally

Full source-map files served publicly reveal source code. Upload them to your error tracker and don't deploy them, or use hidden-source-map.

Configuration Sprawl

Copy-pasted loaders and plugins accumulate until nobody understands the build. Keep config small, commented, and tested.

Comparison

FAQ

What is webpack used for?

webpack bundles JavaScript modules and their assets — CSS, images, fonts — into optimized files for browsers, with code splitting, minification, and caching support.

What's the difference between loaders and plugins?

Loaders transform individual files as they're imported (TypeScript to JavaScript, Sass to CSS). Plugins hook into the whole build to do broader tasks like generating HTML, extracting CSS, or defining environment variables.

Is webpack still worth learning?

Yes if you work on existing codebases — many production apps still use it. For new projects, Vite is usually the better starting point, but webpack's concepts (entries, chunks, loaders) transfer to every bundler.

How do I migrate from webpack to Vite?

Move index.html to the project root, replace loaders with Vite plugins or built-in support, convert process.env usage to import.meta.env, and verify dynamic imports and aliases. For very large apps, Rspack offers a lower-effort path with near-drop-in compatibility.

What is Module Federation?

A webpack feature that lets separately built and deployed applications share modules at runtime, commonly used to build micro-frontends.