Bundling your Front-End with webpack

on YouTube ↗17m

" summary

Refactors a small weather app that pulls in jQuery and an SVG, sets entry point app.js and outputs to a dist folder, then runs webpack to build a dependency graph and produce bundles. Uses a url-loader with 10KB inline limit so the SVG becomes inlined SVG as base64 instead of a separate request, and imports jQuery into the bundle. Demonstrates bundle size at ~275KB and then runs webpack -p uglify/minify to shrink the production bundle and show it still works.

AI-written summary · about

" chapters (9)

1. 0:00Intro
2. 0:25What is webpack
3. 1:29How does webpack work
4. 2:34Why use webpack
5. 6:13Task runners vs webpack
6. 7:40Core concepts
7. 8:29Loaders
8. 9:49Demo
9. 10:16Mockup

" related talks

• 01h 03mIntroduction to webpackChris Klug · NDC Minnesota 2018
• 30mWebpack – The React PartsJuho Vepsäläinen · ReactNext 2017
• 23mStreamline your code with webpackTara Ojo · JSDay 2019
• 34mGift Wrap Your Code with WebpackJeremy Lund · MountainWest JavaScript 2015
• 36mUnbundling the JavaScript module bundlerLuciano Mammino · Codemotion Rome 2018
• 52m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · jsDay 2018
• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 08mHow to Reduce Your Vue Bundle Size With WebpackJennifer Bland · VueConf US 2019