IntermediateApplied2 weeks

Build Tools

Understand how Vite, Webpack, Babel, TypeScript, and bundling transform source code into deployable assets.

Topic 13 of 24

Prerequisites

JavaScript
Package Managers

Key Concepts & Skills

Bundling
Transpilation
Code splitting
Tree shaking
Source maps
Environment variables

Learning Outcomes

Understand the core principles of Bundling
Configure and deploy Transpilation successfully
Troubleshoot common issues with Code splitting
Understand the core principles of Tree shaking
Configure and deploy Source maps successfully
Troubleshoot common issues with Environment variables

Resources

Official documentation

Vite docs Webpack concepts Babel handbook

Practice Exercises

Create a Vite app from scratch.Inspect generated bundles.Configure environment variables and aliases.

Project Task

Build a TypeScript SPA starter with Vite, linting, and production build scripts.

Quiz

What is the primary purpose of Build Tools?What are the common alternatives to Build Tools?How do you implement Build Tools in a production environment?

Notes