// the find
ruanyf/webpack-demos
a collection of simple demos of Webpack
A collection of 15 standalone Webpack examples, each covering one concept: entry points, loaders, plugins, code splitting, CSS modules, and React Router. Aimed at developers who learn by running code rather than reading docs. The author is Ruan Yifeng, who writes a lot of beginner-friendly Chinese dev content.
Each demo is genuinely minimal — no scaffolding noise, just the config and the files that matter. The progression from entry file to code splitting is well-ordered; you can follow it linearly and each concept builds on the last. The README doubles as a tutorial, showing config and output side by side, which is much more useful than abstract explanations. Covers the concepts most people actually get confused by: CommonsChunkPlugin vendor splitting, CSS Modules scoping, and url-loader's size threshold.
The repo targets Webpack 3/4 and hasn't been touched since December 2020 — it's now two major versions behind. CommonsChunkPlugin was removed in Webpack 5 (replaced by SplitChunksPlugin), and babel-preset-es2015 was deprecated in favor of @babel/preset-env, so several demos will fail on a fresh install without version-pinning. The prebuilt bundle.js files are committed alongside source, which is confusing noise in a teaching repo. There's no coverage of asset modules (Webpack 5's replacement for file-loader/url-loader) or module federation, which are the things people actually get stuck on today.