Frontend · Learning hub

Webpack cheat sheet & developer notes

Webpack cheat sheet and 3 curated developer notes — core concepts, patterns, and interview prep. Maintained by the DevRecall team.

Save this stack to your DevRecall Test yourself — Webpack quiz More Frontend notes

Webpack Configuration

Webpack Configuration. Core Concepts. Entry — starting point(s) of the dependency graph. Output — where to emit bundled files and how to name them. Loaders — transform non-JS files (CSS, images, TypeScript) into modules.…

Webpack Core Concepts

Webpack Core Concepts. Webpack is a static module bundler for JavaScript applications. It builds a dependency graph and emits one or more optimized bundles.. Entry, Output & Resolve. const path = require('path'); module.…

Webpack Optimization

Webpack Optimization. Advanced webpack techniques: code splitting, tree shaking, long-term caching, bundle analysis, and merging dev/prod configs.. Code Splitting & Dynamic Imports. // Dynamic import — webpack creates a …

From the community

Notes from developers

See all in Frontend →

Zustand

No preview available.

Concepts to know for Webpack

ES Modules vs CommonJS: How JavaScript Modules LoadWhy require runs a file on the spot while import builds the whole graph first, what live bindings and circular imports do, and how Node picks a module system.Intermediate·14 min The Critical Rendering PathHow a browser turns HTML, CSS and JS into pixels, which resources block which step, and why some CSS changes cost a layout while others cost nothing.Intermediate·14 min Core Web VitalsWhat LCP, INP and CLS actually measure in the browser, the fixes that move each one, and why a green Lighthouse score can go with red field data.Intermediate·14 min Tree Shaking, Code Splitting and Bundle SizeWhy JavaScript bytes cost more than image bytes, how bundlers drop unused exports, what quietly stops them, and how splitting and budgets keep bundles small.Intermediate·13 min

Related stacks

Accessibility Alpine.js Angular Ant Design AppKit Astro Axios Babel Blazor Bootstrap CSS Modules Chakra UI

Browse all stacks →

Keep your Webpack knowledge sharp.

Save this stack to your personal DevRecall — add your own notes, track what you're learning, and share what you know with the community.

Get started — free forever