The Hitchhiker's Guide to the Webpack
summary
Step-by-step setup of a real React app using Webpack: installs and configures React + ES6 + Babel, outputs a single bundle, adds CSS Modules with postcss/cssnext and source maps, uses url-loader to inline small images (configurable limit), enables the dev server with hot-reload and history API fallback, adds Babel minification plugin, configures ESLint/Prettier and stylelint, and wires husky/lint-staged for precommit fixes — everything shown working on a sample project.
AI-written summary · about
chapters (22)
- 0:00Introduction to Webpack
- 1:57What is Webpack
- 3:03Installing Webpack
- 3:43Webpack config basics
- 4:49Resolving file extensions
- 5:33Configuring loaders
- 6:37Setting up Babel
- 8:03Handling images
- 9:07Processing CSS
- 10:30CSS modules explained
- 11:56Source maps for debugging
- 12:17CSS next and PostCSS
- 13:20Dev server setup
- 14:44Dev server configuration
- 15:48Minifying JavaScript
- 16:31Progress plugin
- 17:13Webpack CLI overview
- 17:34Linting with ESLint
- 20:23Linting CSS with Stylelint
- 21:49Webpack Blocks
- 23:14Husky and lint-staged
- 25:03Q&A
related talks
01h 03mIntroduction to webpack
28mWebpack for a better development workflow
24mHow to Pack your Webpack
01h 01mUseful Tools and Utils for JS Development
26mWebpack: Core Concepts and Advance Topics
20mWebpack: Your New BFF
17mThe Client-Side Revolution, Brought to You by React
17mBundling your Front-End with webpack