Bundling your Front-End with webpack
summary
Overview of webpack essentials with a live refactor of a simple weather site: a JS entry builds a dependency graph, loaders turn CSS and images into modules, and plugins handle minification, hashing and chunking. Demo shows bundling pulls jQuery into the main file so the browser stops requesting it (removed jQuery network request), URL loader encodes icons (inlined SVG under 10KB), and production mode minifies a 275KB bundle down substantially.
AI-written summary · about
chapters (7)
- 0:00Introduction to Webpack
- 1:30How Webpack works
- 2:35Why use Webpack
- 6:15Webpack vs Task runners
- 7:41Core concepts
- 9:48Practical demonstration
- 14:27Q&A and advanced features
related talks
01h 03mIntroduction to webpack
34mGift Wrap Your Code with Webpack
30mWebpack – The React Parts
23mStreamline your code with webpack
36mUnbundling the JavaScript module bundler
40mBuild Your Own webpack (Live Coding an Ultra-Simplified Example of a Modern Module Bundler in JavaScript)
55mUnderstanding webpack from inside out
28mWebpack for a better development workflow