Topolearn

Learn webpack

Configurable module bundler that builds a dependency graph into optimized bundles

14 lessons · 3 hours · 4 levels · covers webpack 5 (5.11x), webpack-cli 7, webpack-dev-server 5/6

webpack is the module bundler that powered a decade of frontend development: starting from entry points it builds a dependency graph of JavaScript, CSS and assets, transforms them with loaders and plugins, and emits optimized bundles. It still runs a huge number of production applications and enterprise build pipelines, and its concepts (loaders, code splitting, module federation) underpin newer tools such as Rspack.

Sign in free to track progressOfficial docs ↗

Before you start

webpack builds on these; the tree links to the exact lessons you need.

JavaScriptPractical levelNode.jsEssentials levelnpmEssentials level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics5 lessons · 54 min in total
2. PracticalUse it productively at work, with the usual idioms8 lessons · 1 hour in total
3. AdvancedThe less common features, performance and trade-offs11 lessons · 2 hours in total
4. ExpertInternals and the edge cases experts know14 lessons · 3 hours in total

The webpack tree

webpackWhat webpack doesWhat webpack doesConfiguration: entry, output and modeConfiguration: entry,output and modeLoadersLoadersPlugins: HTML, CSS extraction and definesPlugins: HTML, CSSextraction and defi…Asset modules: images, fonts and filesAsset modules:images, fonts and fi…webpack-dev-server and HMRwebpack-dev-serverand HMRModule resolution and aliasesModule resolutionand aliasesSource maps and per-environment configsSource maps andper-environment c…npm scripts and lifecycle hooksnpm scripts andlifecycle hooksModules: ES modules vs CommonJSModules: ES modulesvs CommonJSModules: import and exportModules: import andexport
Essentials and Practical shown (8 of 14 lessons); the full list is below. Click a lesson to read it.

All 14 lessons, in order

Core concepts

  1. What webpack does · Essentials · 8 min

    webpack starts from entry points, follows every import to build a dependency graph, and emits bundles the browser can load.

  2. Configuration: entry, output and mode · Essentials · 12 min

    Write webpack.config.js with entry, output and mode, use content hashes in filenames, and clean the output folder.

Loaders, assets and plugins

  1. Loaders · Essentials · 12 min

    Transform files with module.rules: test, use and exclude, chain loaders right to left, and process CSS and modern JavaScript.

  2. Plugins: HTML, CSS extraction and defines · Essentials · 12 min

    Use HtmlWebpackPlugin to generate index.html, MiniCssExtractPlugin to emit CSS files, and DefinePlugin for compile-time constants.

  3. Asset modules: images, fonts and files · Essentials · 10 min

    Handle images, fonts and other files with webpack 5's built-in asset module types instead of file-loader and url-loader.

Development workflow

  1. webpack-dev-server and HMR · Practical · 12 min

    Run webpack-dev-server for in-memory rebuilds, hot module replacement, API proxying and history API fallback for SPAs.

  2. Module resolution and aliases · Practical · 10 min

    Control how imports are found with resolve.extensions, alias, modules, conditionNames and fallback for Node built-ins.

  3. Source maps and per-environment configs · Practical · 12 min

    Pick a devtool for each mode, split config into common, dev and prod files with webpack-merge, and pass environment values.

Optimizing output

  1. Code splitting and SplitChunksPlugin · Advanced · 15 min

    Split bundles with dynamic import(), magic comments and prefetching, and tune SplitChunksPlugin's cache groups for vendor code.

  2. Long-term caching and persistent cache · Advanced · 12 min

    Keep hashes stable across builds with contenthash, a runtime chunk and deterministic ids, and speed up rebuilds with the filesystem cache.

  3. Tree shaking and sideEffects · Advanced · 12 min

    Get dead code eliminated with ES modules, usedExports, the sideEffects flag and scope hoisting, and know what breaks it.

Extending and internals

  1. Module Federation and micro-frontends · Expert · 15 min

    Share code between independently deployed builds at runtime with Module Federation remotes, exposes and shared singletons.

  2. Writing loaders and plugins · Expert · 15 min

    Write a loader as a source-transforming function and a plugin that taps compiler and compilation hooks via Tapable.

  3. Internals and build performance · Expert · 15 min

    Understand the module graph, chunk graph and runtime, profile slow builds, and know when to switch to faster loaders or Rspack.