How to Use This Course
  • Start Here!
  • Links to Github Repos
  • Join Our Community!
What Does Webpack Do?
  • Why Do We Use Build Tools?
  • Javascript Modules
  • The Purpose of Webpack
  • Test Your Understanding
  • Webpack in Action
  • Javascript Module Syntax
  • Linking Files with CommonJS
  • Webpack Installation and Configuration
  • More on Webpack Configuration
  • Running Webpack
  • The Bundle.js File
  • Running the App
Handling Project Assets
  • Introduction to Loaders
  • Babel Setup for ES2015
  • Babel Configuration
  • Refactor to ES2015 Modules
  • Handling CSS with Webpack
  • The Style and CSS Loaders
  • Loaders are Tricky!
  • The Extract Text Plugin
  • Handling Images with Webpack
  • Automatic Image Compression
  • Public Paths
Building for Performance with Webpack
  • Introduction to Code Splitting
  • Codesplitting in Practice
  • On Demand Code Loading
  • System Import Calls
Applying Webpack to a Real Project
  • A Real World Project
  • Setting Up Babel
  • Minimum Webpack Config
  • Vendor Asset Caching
  • More on Vendor Caching
  • Refactoring for Vendor Splitting
  • Effect of Code Splitting
  • Troubleshooting Vendor Bundles
  • Chunk Hashing for Cache Busting
  • Cache Busting Wrapup
  • Cleaning Project Files
Webpack Dev Server
  • Introduction to Webpack Dev Server
  • Gotchas with Webpack Dev Server
React-Specific Topics
  • React Router with Codesplitting
  • Plain Routes with React Router Codesplitting
Webpack-Based Deployment for Static Sites
  • Deployment Options
  • Getting Production Ready
  • Deployment with Surge (Easiest!)
  • Deployment with Github Pages
  • Deployment with AWS S3
Webpack-Based Deployment for Dynamic Sites
  • Deployment of Servers
  • Node and Webpack Integration
  • Webpack Middleware in Development
  • Webpack Middleware in Production
  • Deployment to Heroku
  • Deployment to AWS
  • More on AWS Deployment
Extras
  • Bonus!