Introduction to webpack

on YouTube ↗01h 03m

" summary

Basic, hands‑on walkthrough of configuring webpack to bundle a small app: shows entry points, building a dependency graph, and turning TS/HTML/LESS/images into a single JS bundle using ts-loader, raw-loader, url-loader and file-loader. Adds html-webpack-plugin to inject hashed filenames like [name].[hash].bundle.js for cache‑busting, uses webpack‑dev‑server for live reload and source maps for TypeScript debugging, and demonstrates production mode minification — the demo builds and reloads successfully.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 2:11Getting Started Web Pack
3. 5:17Basics of Web Pack
4. 9:26Plugins
5. 13:46Build Modes
6. 14:18Entry Point
7. 26:07Web Component Rendering Tool
8. 28:57Header Component
9. 34:59Handlebars
10. 41:13Webpack Config
11. 44:29Dev Server
12. 45:25Add a Server Config
13. 49:58Production Builds
14. 50:49Environment Variables
15. 51:19Create a Production Build

" related talks

• 17mBundling your Front-End with webpackSandeep Singh · NDC London 2017
• 23mStreamline your code with webpackTara Ojo · JSDay 2019
• 27mA re-introduction to webpackPraveen Puglia · ReactFoo Mumbai 2018
• 30mWebpack – The React PartsJuho Vepsäläinen · ReactNext 2017
• 41mOnce you go webpack you never go backMaciej Hryniszak · JDD 2016
• 20mWebpack: Your New BFFJennifer Bland · ngAtlanta Conf 2018
• 40mWebpack for DummiesCarlos P. Jimeno · Codemotion Madrid 2017
• 34mGift Wrap Your Code with WebpackJeremy Lund · MountainWest JavaScript 2015