Webpack: Module Bundling and Build Optimization

What you'll learn

• Configure entry, output and mode in `webpack.config.js`.
• Process JavaScript, CSS and assets with loaders and plugins.
• Reduce bundle size with tree-shaking, code splitting and minification.
• Apply `[contenthash]` and vendor chunks for long-term caching.
• Run a dev server with HMR and source maps, and diagnose common build problems.

Syllabus

Module 1: Getting started

1. Introduction to bundling
2. Installation and basic setup
3. Core concepts: entry and output

Module 2: Foundations

1. Loaders and rules
2. Plugins and extensions
3. Configuration and modes

Module 3: Core mechanics

1. Module resolution
2. Dependency graph and bundling
3. Tree-shaking and code splitting

Module 4: Transforming assets

1. CSS and styling
2. Images and assets

Module 5: Development workflow

1. Dev server and hot reload
2. Debugging and source maps

Module 6: Practical usage

1. Building for different targets
2. Working with frameworks

Module 7: Optimization

1. Minification and compression
2. Caching strategies

Module 8: Advanced patterns

1. Custom loaders and plugins
2. Monorepos and workspaces

Module 9: Integration

1. TypeScript and transpilation
2. Testing and CI/CD integration

Module 10: Revision

1. Common pitfalls and solutions
2. Performance monitoring and profiling
3. Alternative bundlers and migration
4. Real-world applications and best practices