Webpack for a better development workflow
summary
Argues that Webpack replaces much gluing work, showing concrete setup: base config plus dev/prod merges, babel loaders, webpack-dev-server and npm scripts, and using hot module replacement to inject updated modules while preserving component state (demoed with Vue/React plugins) so edits avoid full reloads. Describes assets served in memory for sub-second rebuilds, code splitting to shrink initial payload, and dead code removal plus content hashing to cut downloads and speed deploys.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:00What's currently available
- 2:58Modularisation is important
- 3:52Maintainability is important
- 4:32Performance is important
- 5:13Scalability is important
- 7:09What is Webpack? Task Runner
- 7:52Key features Modules to bundles
- 9:59Browserify
- 11:21Bundling and entries Consistency with deployment environments Clear bunding strategies Common bundles
- 12:33Outputs Output versioning
- 14:25Code splitting Initialisation performance
- 15:34HMR (Hot Module Replacement) Webpack tracks the modules dependency tree, which enables: Patch part of dependency tree with the new code
- 18:22Adding loaders to base config
- 19:18Extending base config
- 19:52Creating dev config
- 20:55Creating production config
- 21:29Example package.json scripts
- 22:06express and webpack-dev-middleware Custom implementations
- 24:08Hot module replacement in action
- 25:13Too much?
