YoVDO

Webpack 5 Crash Course - Frontend Development Setup

Offered By: Traversy Media via YouTube

Tags

Webpack Courses Source Maps Courses

Course Description

Overview

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.


Taught by

Traversy Media

Related Courses

CSS to Sass Course (How To)
Treehouse
Webpack & TypeScript Setup
Net Ninja via YouTube
Learning GWT
LinkedIn Learning
Webpack 4 Fundamentals
Frontend Masters
Debug JavaScript in Chrome with DevTool Sources
egghead.io