Webpack 5 Crash Course - Frontend Development Setup

Learn to set up a comprehensive Webpack 5 development environment for frontend projects in this 41-minute video tutorial. Create a Webpack configuration from scratch, incorporating essential features such as Webpack Dev Server, HTML Webpack Plugin, Sass compilation, Babel transpilation, asset resource loaders, and the Analyzer Plugin. Explore source maps for debugging and discover how to optimize your build process. Follow along to build a complete frontend development setup, including module creation, NPM module usage, caching strategies, and file management. Conclude by applying your newly acquired skills to finish a practical joke application while gaining insights into bundle analysis for performance optimization.

Syllabus

- Intro.
- Initial Files (src/dist).
- Creating Modules.
- Webpack Install & Building.
- Using NPM Modules.
- Webpack Config File.
- Loaders & Sass Compiling.
- HTML Webpack Plugin.
- HTML Template.
- Caching & Hash Setup.
- Webpack Dev Server.
- Cleaning Up Hash Files.
- Source Maps.
- Babel Loader.
- Asset Resource Loader.
- Finish The Joke App.
- Webpack Bundle Analyzer.