Webpack
Webpack is an open-source static module bundler for JavaScript applications that traces a project's dependency graph and packages modules and their assets into optimized, deployable bundles.
19 resources across 3 libraries
Glossary Terms(9)
Webpack
Webpack is an open-source static module bundler for JavaScript applications that traces a project's dependency graph and packages modules and their assets into…
Yarn
Yarn is a fast, reliable JavaScript and Node.js package manager, compatible with the npm registry, that installs, manages, and locks project dependencies.
Babel
Babel is a free, open-source JavaScript compiler (transpiler) that converts modern ECMAScript (ES6+) syntax, JSX, and TypeScript into backwards-compatible Java…
Vite
Vite is a fast JavaScript build tool and development server that uses native ES modules for near-instant startup and hot module replacement during development,…
ESLint
ESLint is a pluggable, configurable open-source linter that statically analyzes JavaScript and TypeScript code to catch bugs, enforce style conventions, and fl…
Vite (web)
Vite is a fast front-end build tool and development server that serves source code over native ES modules during development and bundles the app for production…
Parcel
Parcel is a web application bundler known for requiring little to no configuration, automatically handling dependency resolution, transformation, and bundling…
Rollup
Rollup is a JavaScript module bundler that combines many small modules into a single, optimized file, particularly known for producing efficient, tree-shaken b…
Turbopack
Turbopack is a Rust-based, incremental JavaScript and TypeScript bundler built by Vercel, designed as a faster successor to Webpack for use primarily within Ne…
Cheat Sheets(1)
Interview Questions(9)
What Is Webpack and Bundling?
Webpack is a module bundler that walks a JavaScript application’s dependency graph starting from an entry file and combines all the modules, along with assets…
What Is Tree-Shaking in JavaScript?
Tree-shaking is a build-time optimization where a bundler statically analyzes ES module import/export statements to detect which exports are actually used, the…
What Are Code-Splitting Strategies and Why Do They Matter?
Code splitting breaks a single large JavaScript bundle into smaller chunks that load on demand — by route, by component, or by vendor library — so the browser…
ES Modules vs. Bundlers: How Do They Relate?
ES modules are the native, browser- and Node-supported import/export syntax for organizing code into files with explicit dependencies, while a bundler is a sep…
What Are Source Maps and Why Do They Matter?
A source map is a separate file that maps each position in minified, transpiled, or bundled production JavaScript back to its original location in the source c…
How Do Modern Module Bundlers Like Vite, esbuild, and Webpack Compare?
Webpack bundles everything up front through a JavaScript-based dependency graph, esbuild is a Go-based bundler/minifier built for raw speed, and Vite uses nati…
What Is Webpack Module Federation and How Does It Work?
Module Federation is a Webpack (and now Rspack/Vite-ecosystem) capability that lets separately built and independently deployed JavaScript bundles dynamically…
How Do You Use Bundle Analysis Tools to Optimize JavaScript?
Bundle analysis tools like webpack-bundle-analyzer or source-map-explorer parse a build’s stats output and source maps to render a visual treemap showing exact…
What Is Dead Code Elimination and How Does It Work?
Dead code elimination is a build-time optimization where the bundler statically analyzes which exported code paths are never imported or used and removes them…