Webpack interviews examine bundling concepts—entry, output, loaders, plugins—and how build pipelines shape production performance.
Explain how Webpack builds a dependency graph from entry points, applies loaders to transform non-JS assets, and plugins hook the compilation lifecycle for optimization, HTML injection, and env vars.
Senior questions cover code splitting, dynamic import(), tree shaking sideEffects, Module Federation, source maps, cache groups, and comparing Webpack to Vite/esbuild for dev speed vs configurability trade-offs.
Quick answers you can expand in a real interview.
| Topic | Short answer |
|---|---|
| Transform non-JS | Loaders: babel-loader, css-loader |
| Lifecycle hooks | Plugins: HtmlWebpackPlugin, DefinePlugin |
| Code split | optimization.splitChunks + import() |
| Dev fast rebuild | cache: { type: "filesystem" } |
| Tree shake flag | mode: "production" + sideEffects in package.json |
| Expose modules | ModuleFederationPlugin remotes/consumes |
Use the short version first, then offer trade-offs if the interviewer wants depth.
Webpack bundles JavaScript modules and assets into optimized files browsers load efficiently. It resolves import graph, transforms code via loaders, splits chunks, hashes filenames for caching, and applies plugins for minification and env injection. Essential before native ESM was ubiquitous; still common in enterprise apps.
Loaders transform individual modules at import time—babel-loader transpiles TS/JS, css-loader interprets @import in CSS, file-loader emits assets. Plugins tap webpack compilation hooks globally—HtmlWebpackPlugin emits HTML, DefinePlugin injects constants, MiniCssExtractPlugin extracts CSS files.
entry defines graph roots—single or multiple { app: "./src/index.js", admin: "./admin.js" }. output.path and filename control emit location; [contenthash] enables long-term caching. mode "development" vs "production" toggles defaults like minification and tree shaking.
Dynamic import() creates async chunks loaded on demand—route-based splitting reduces initial bundle. optimization.splitChunks extracts shared vendors into separate files when modules repeat across chunks. Balance chunk count vs HTTP overhead—too many small chunks hurt HTTP/1.1.
ES module static import/export allows dead export elimination in production mode. package.json sideEffects: false tells webpack pure ESM packages are safe to drop unused exports. CommonJS dynamic requires limit shaking—prefer ESM in library code targeted for tree shaking.
Source maps map bundled code back to original sources for debugging. devtool: eval-c-source-map is fast in development; source-map or hidden-source-map for production error tracking without exposing maps publicly. Choose based on build speed vs stack trace quality.
Module Federation lets independently deployed apps share modules at runtime—host consumes remoteEntry.js from another build. Configure ModuleFederationPlugin with exposes, remotes, and shared singleton dependencies like react. Enables micro-frontends without monolithic releases.
Webpack bundles on save—slower cold start on large apps though filesystem cache helps. Vite serves native ESM in dev with esbuild prebundle for deps—near-instant start. Webpack offers mature plugin ecosystem; Vite wins dev UX, often still using Rollup/Webpack for production depending on setup.
babel-loader runs Babel on matched JS/TS files applying @babel/preset-env per browserslist and TypeScript preset if needed. Exclude node_modules unless transpiling specific packages. cacheDirectory speeds rebuilds. Babel handles syntax; webpack handles module graph.
Webpack 5 built-in asset/resource, asset/inline, and asset/source replace many loader-file patterns. type: "asset" auto chooses inline below size limit. Simplifies config versus file-loader/url-loader legacy trio—migrate for maintainability.
DefinePlugin replaces free identifiers at compile time—commonly process.env.NODE_ENV and feature flags. Values must be JSON.stringify wrapped. Enables dead code elimination when if (process.env.NODE_ENV === "production") branches fold away in minifier.
Enable mode production, splitChunks for vendors, contenthash filenames, MiniCssExtractPlugin for CSS caching, compression plugins (Terser, css-minimizer), analyze bundle with webpack-bundle-analyzer, lazy-load routes, and audit large dependencies replacing moment with date-fns/luxon treeshaken imports.
Hot Module Replacement swaps changed modules without full page reload preserving app state. react-refresh-webpack-plugin resets components safely on edit. Misconfigured HMR causes stale state bugs—know when full reload is acceptable.
resolve.alias maps import paths (@ -> src/) shortening imports and deduping duplicate packages (single react copy). resolve.extensions lists tried suffixes [.tsx, .ts, .js]. Mis-alias can bundle two React versions breaking hooks.
Consider Vite or Rspack when dev feedback loops dominate pain and plugin needs are met. Keep Webpack when Module Federation, custom loaders, or enterprise plugin investments are entrenched. Migration evaluates code splitting parity, env handling, and CI build time ROI.
Pro Tip
Draw the module graph from entry through loaders to emitted chunks—visual bundling beats listing config keys from memory.