Webpack 2: The Complete Developer's Guide
4.7 (2,048 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9,469 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webpack 2: The Complete Developer's Guide to your Wishlist.

Add to Wishlist

Webpack 2: The Complete Developer's Guide

Master Webpack 2 as you deploy web apps supported by Babel, code splitting, and ES2015 Modules.
Bestselling
4.7 (2,048 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9,469 students enrolled
Created by Stephen Grider
Last updated 6/2017
English
English
Current price: $10 Original price: $75 Discount: 87% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the purpose of Webpack in a modern web app
  • Build custom boilerplate projects to serve ES2015 Javascript
  • Deploy Webpack-based projects to AWS, Heroku, and more
  • Enhance the performance of web apps by leveraging Webpack's ecosystem of plugins
  • Enhance code organization through the use of ES2015 JS Modules
View Curriculum
Requirements
  • Basic knowledge of Javascript
  • A Mac or PC
Description

Webpack is the premier build tool for React and Angular 2 applications.

Deployment?  Covered.  Performance optimizations? We got it.  Custom boilerplate creation?  Its here!

Webpack is notorious for being tricky to configure correctly.  In this course you'll master each major feature of Webpack and learn how to optimize it for your own app.  Webpack has a wealth of fancy features, but each requires in depth knowledge of how they work.  This course is the most comprehensive Webpack course you'll find online, and the only full course on the popular version 2 edition of Webpack.

This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build Webpack-based projects.

Tired of downloading boilerplates packages with no idea how to change them?

React and Angular 2 have seen standalone boilerplate packages flourish, but they come with dense configuration setups that make them challenging to change.  With the experience you gain in this course you'll be able to customize your projects to suit your particular needs.

So much content!

  • Learn the difference between ES2015 and CommonJS module systems
  • Load ES2015 code with Webpack's Babel Loader
  • Use Webpack to automatically resize and compress images for optimal load times
  • Implement code splitting to dramatically decrease load times
  • Learn to tweak your React project to work perfectly with Webpack
  • Master versioning of your application to reduce the amount of code your users download
  • Deploy your application to AWS, Heroku, Github Pages, or Surge


Webpack can be confusing to learn, but after taking this course you'll understand that it is a tool that requires just a bit of concentration to master.  Once you hear my explanations of Webpack, you'll come to realize that each concept is straightforward, and only requires the smallest touch of patience to comprehend.  No filler here, just laser focus on the most important aspects of Webpack.

I always build courses I would want to take, and this is no exception.  Every topic is explained in great detail with accompanying diagrams and examples.  You'll learn the back story of each feature and learn where to apply them to solve real world problems. 

Who is the target audience?
  • Any engineer with basic knowledge of Javascript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
56 Lectures
05:32:11
+
How to Use This Course
2 Lectures 01:33

Links to Github Repos
00:02
+
What Does Webpack Do?
11 Lectures 01:00:03


The Purpose of Webpack
04:47

Test Your Understanding
3 questions

Webpack in Action
04:54

Javascript Module Syntax
07:30

Linking Files with CommonJS
05:16

Webpack Installation and Configuration
06:31

More on Webpack Configuration
05:31

Running Webpack
05:12

The Bundle.js File
05:59

Running the App
03:21
+
Handling Project Assets
11 Lectures 01:03:59
Introduction to Loaders
06:20

Babel Setup for ES2015
04:08

Babel Configuration
04:24

Refactor to ES2015 Modules
03:12

Handling CSS with Webpack
07:04

The Style and CSS Loaders
06:13

Loaders are Tricky!
05:37

The Extract Text Plugin
06:26

Handling Images with Webpack
07:18

Automatic Image Compression
08:48

Public Paths
04:29
+
Building for Performance with Webpack
4 Lectures 22:17
Introduction to Code Splitting
05:44

Codesplitting in Practice
04:41

On Demand Code Loading
05:15

System Import Calls
06:37
+
Applying Webpack to a Real Project
11 Lectures 01:04:04
A Real World Project
02:42

Setting Up Babel
04:27

Minimum Webpack Config
06:26

Vendor Asset Caching
04:34

More on Vendor Caching
05:10

Refactoring for Vendor Splitting
09:01

Effect of Code Splitting
06:27

Troubleshooting Vendor Bundles
09:37

Chunk Hashing for Cache Busting
06:03

Cache Busting Wrapup
05:22

Cleaning Project Files
04:15
+
Webpack Dev Server
2 Lectures 16:12
Introduction to Webpack Dev Server
06:04

Gotchas with Webpack Dev Server
10:08
+
React-Specific Topics
2 Lectures 18:28
React Router with Codesplitting
07:44

Plain Routes with React Router Codesplitting
10:44
+
Webpack-Based Deployment for Static Sites
5 Lectures 35:20
Deployment Options
04:22

Getting Production Ready
07:44

Deployment with Surge (Easiest!)
03:55

Deployment with Github Pages
09:02

Deployment with AWS S3
10:17
+
Webpack-Based Deployment for Dynamic Sites
8 Lectures 50:22
Deployment of Servers
05:02

Node and Webpack Integration
05:45

Webpack Middleware in Development
07:28

Webpack Middleware in Production
10:29

Deployment to Heroku
08:03

Deployment to AWS
07:16

More on AWS Deployment
05:54

Rallycoding
00:25
About the Instructor
Stephen Grider
4.7 Average rating
38,316 Reviews
89,336 Students
12 Courses
Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.