JS
JS Interview
Interview
Bundlers
Interview
Playground
⌘K
Home
JS Concepts
DSA Patterns
Interview Prep
Playground
Bundler Interview Prep
100 questions across Webpack, Vite, Rollup, esbuild, Parcel, and more
All
Easy
Medium
Hard
All Topics
Common Concepts
Webpack
Vite
Rollup
esbuild
Parcel
Turbopack
Rspack
Rolldown
Showing
100
of 100 questions
01
What is a JavaScript bundler and why do we need one?
easy
Common Concepts
bundling-basics
02
What are the main JavaScript module formats (CJS, ESM, AMD, UMD)?
easy
Common Concepts
module-formats
03
What is tree shaking in the context of bundlers?
easy
Common Concepts
tree-shaking
04
What is code splitting and why is it important?
easy
Common Concepts
code-splitting
05
What is Hot Module Replacement (HMR)?
easy
Common Concepts
hmr
06
How does a bundler construct a dependency graph?
medium
Common Concepts
dependency-graph
07
What is the difference between static and dynamic imports for code splitting?
medium
Common Concepts
code-splitting
08
How do source maps work and what are the different quality levels?
medium
Common Concepts
source-maps
09
What is scope hoisting and how does it reduce bundle size?
medium
Common Concepts
scope-hoisting
10
What is the difference between bundling, transpiling, and minifying?
medium
Common Concepts
bundling-basics
11
How does tree shaking handle side effects, and what is the sideEffects field in package.json?
hard
Common Concepts
side-effects
12
What are the trade-offs between different chunking strategies (vendor, route-based, shared)?
hard
Common Concepts
chunking
13
How would you debug a production bundle to identify why tree shaking failed for a module?
hard
Common Concepts
tree-shaking
14
Explain how circular dependencies are handled by bundlers and what problems they cause.
hard
Common Concepts
circular-deps
15
How does differential serving work with bundlers (modern vs legacy builds)?
hard
Common Concepts
bundling-basics
16
What are the core concepts of Webpack (entry, output, loaders, plugins)?
easy
Webpack
core-concepts
17
What is a Webpack loader and how does it differ from a plugin?
easy
Webpack
loaders
18
What is the purpose of webpack.config.js?
easy
Webpack
core-concepts
19
How do you configure Webpack to handle CSS files?
easy
Webpack
loaders
20
What is Webpack Dev Server?
easy
Webpack
dev-server
21
How does Webpack's chunk splitting work with SplitChunksPlugin?
medium
Webpack
chunk-splitting
22
What is the difference between hash, chunkhash, and contenthash in Webpack?
medium
Webpack
hashing
23
How do you configure Webpack for different environments (dev vs prod)?
medium
Webpack
environments
24
What is Webpack's Module Federation and when would you use it?
medium
Webpack
module-federation
25
How does Webpack's resolver work and what is the resolve.alias configuration?
medium
Webpack
resolver
26
What are Webpack's different devtool options for source maps?
medium
Webpack
source-maps
27
How do you analyze and optimize a Webpack bundle size?
medium
Webpack
bundle-analysis
28
What is the purpose of the externals configuration in Webpack?
medium
Webpack
externals
29
How does Webpack handle dynamic imports?
medium
Webpack
dynamic-imports
30
What is the DefinePlugin and how does it enable compile-time constants?
medium
Webpack
define-plugin
31
How does Webpack's Hot Module Replacement work internally?
hard
Webpack
hmr-internals
32
How would you write a custom Webpack loader?
hard
Webpack
custom-loader
33
How would you write a custom Webpack plugin using the tapable hooks system?
hard
Webpack
custom-plugin
34
What is Module Federation's share scope and how does version negotiation work?
hard
Webpack
share-scope
35
How does Webpack 5's persistent caching work and what are its trade-offs?
hard
Webpack
persistent-cache
36
What is Vite and how does it differ from Webpack?
easy
Vite
esm-dev
37
Why is Vite's dev server so fast compared to traditional bundlers?
easy
Vite
esm-dev
38
What is dependency pre-bundling in Vite?
easy
Vite
pre-bundling
39
How does Vite handle CSS and CSS Modules?
easy
Vite
css-handling
40
How does Vite use native ES modules during development?
medium
Vite
esm-dev
41
What is the difference between Vite's dev mode and production build?
medium
Vite
production-build
42
What is the Vite plugin API and how does it extend Rollup's plugin system?
medium
Vite
plugin-api
43
How does Vite's dependency pre-bundling work with esbuild under the hood?
medium
Vite
pre-bundling
44
How do you configure Vite for a library build using library mode?
medium
Vite
library-mode
45
What is import.meta.hot and how does Vite's HMR API work?
medium
Vite
hmr-api
46
How does Vite handle environment variables and .env files?
medium
Vite
env-variables
47
How does Vite handle SSR (Server-Side Rendering) and what is ssrLoadModule?
hard
Vite
ssr
48
What are the limitations of Vite's ESM-based dev server compared to bundled dev servers?
hard
Vite
esm-dev
49
How does Vite's module graph work internally for dependency tracking?
hard
Vite
module-graph
50
How would you write a Vite plugin that transforms custom file types?
hard
Vite
plugin-api
51
What is Rollup and what is it best suited for?
easy
Rollup
library-bundling
52
What output formats does Rollup support?
easy
Rollup
output-formats
53
How do you configure Rollup to bundle a simple library?
easy
Rollup
library-bundling
54
How does Rollup's tree shaking compare to Webpack's?
medium
Rollup
tree-shaking
55
What are Rollup's plugin hooks and the build lifecycle?
medium
Rollup
plugin-hooks
56
How do you configure Rollup for a library that outputs both CJS and ESM?
medium
Rollup
library-bundling
57
What is the difference between Rollup's resolveId, load, and transform hooks?
medium
Rollup
plugin-hooks
58
How does Rollup handle external dependencies?
medium
Rollup
external-deps
59
What are Rollup's chunk naming and manual chunks strategies?
medium
Rollup
chunk-naming
60
How does Rollup achieve superior tree shaking through its ESM-first architecture?
hard
Rollup
side-effect-analysis
61
How would you write a Rollup plugin from scratch?
hard
Rollup
virtual-modules
62
How does Rollup handle circular dependencies differently from Webpack?
hard
Rollup
circular-deps
63
What is esbuild and why is it significantly faster than JavaScript-based bundlers?
easy
esbuild
go-architecture
64
What are esbuild's main use cases?
easy
esbuild
use-cases
65
How do you use esbuild to bundle a simple project?
easy
esbuild
build-api
66
How does esbuild handle TypeScript files?
easy
esbuild
typescript
67
How does esbuild's architecture differ from Webpack and Rollup?
medium
esbuild
go-architecture
68
What are esbuild's limitations compared to Webpack?
medium
esbuild
limitations
69
What is the esbuild plugin API and what are its constraints?
medium
esbuild
plugin-api
70
How do you use esbuild for bundling a Node.js application?
medium
esbuild
node-bundling
71
How does esbuild handle CSS bundling and CSS modules?
medium
esbuild
css-bundling
72
Why did esbuild choose Go instead of Rust, and how does this affect its performance model?
hard
esbuild
go-architecture
73
What trade-offs did esbuild make for speed (no type checking, limited plugin hooks)?
hard
esbuild
speed
74
How would you integrate esbuild into an existing Webpack project for faster transpilation?
hard
esbuild
integration
75
What is Parcel and what is its core philosophy?
easy
Parcel
zero-config
76
How does Parcel achieve zero configuration?
easy
Parcel
zero-config
77
How does Parcel handle different asset types (images, fonts, CSS, HTML)?
easy
Parcel
resolver
78
How does Parcel's automatic code splitting work?
medium
Parcel
auto-code-splitting
79
What is Parcel's asset graph and how does it differ from Webpack's module graph?
medium
Parcel
asset-graph
80
What are Parcel transformers and how do they process assets?
medium
Parcel
transformers
81
How does Parcel's scope hoisting optimize output bundles?
medium
Parcel
scope-hoisting
82
What is Parcel's content hashing strategy and how does it enable long-term caching?
medium
Parcel
content-hashing
83
How does Parcel 2's architecture with its Rust-based transformer pipeline achieve parallelism?
hard
Parcel
rust-pipeline
84
How does Parcel's automatic differential bundling for modern vs legacy browsers work?
hard
Parcel
targets
85
What is Turbopack and what problem does it solve?
easy
Turbopack
rust-architecture
86
How is Turbopack related to Next.js?
easy
Turbopack
nextjs-integration
87
How does Turbopack's incremental computation model work?
medium
Turbopack
incremental-computation
88
What is the difference between Turbopack and Webpack from an architecture perspective?
medium
Turbopack
webpack-comparison
89
How does Turbopack handle HMR differently from Webpack?
medium
Turbopack
hmr
90
What is Turbopack's function-level caching?
medium
Turbopack
function-caching
91
How does Turbopack's Turbo engine enable lazy compilation at scale?
hard
Turbopack
turbo-engine
92
What are the current limitations of Turbopack and when should you still use Webpack?
hard
Turbopack
webpack-comparison
93
What is Rspack and why was it created?
easy
Rspack
webpack-compatibility
94
How compatible is Rspack with Webpack's loader and plugin API?
medium
Rspack
loader-support
95
What are the key architectural differences between Rspack and Webpack?
medium
Rspack
rust-architecture
96
How do you migrate a Webpack project to Rspack?
medium
Rspack
migration
97
What Webpack features are not fully supported in Rspack and why?
hard
Rspack
plugin-support
98
What is Rolldown and what is its relationship to Vite?
easy
Rolldown
vite-integration
99
How does Rolldown aim to maintain compatibility with Rollup's plugin API?
medium
Rolldown
rollup-compatibility
100
What architectural decisions make Rolldown faster than Rollup while maintaining API compatibility?
hard
Rolldown
rust-architecture