Webpack 2: The Complete Developer’s Guide

Webpack 2: The Complete Developer’s Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 5.5 Hours | Lec: 55 | 812 MB

Master Webpack 2 as you deploy web apps supported by Babel, code splitting, and ES2015 Modules.

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.

Table of Contents

How to Use This Course
1 Start Here
2 Links to Github Repos.html

What Does Webpack Do
3 Why Do We Use Build Tools
4 Javascript Modules
5 The Purpose of Webpack
6 Webpack in Action
7 Javascript Module Syntax
8 Linking Files with CommonJS
9 Webpack Installation and Configuration
10 More on Webpack Configuration
11 Running Webpack
12 The Bundle.js File
13 Running the App

Handling Project Assets
14 Introduction to Loaders
15 Babel Setup for ES2015
16 Babel Configuration
17 Refactor to ES2015 Modules
18 Handling CSS with Webpack
19 The Style and CSS Loaders
20 Loaders are Tricky
21 The Extract Text Plugin
22 Handling Images with Webpack
23 Automatic Image Compression
24 Public Paths
25 Webpack 2

Building for Performance with Webpack
25 Introduction to Code Splitting
26 Codesplitting in Practice
27 On Demand Code Loading
28 System Import Calls

Applying Webpack to a Real Project
29 A Real World Project
30 Setting Up Babel
31 Minimum Webpack Config
32 Vendor Asset Caching
33 More on Vendor Caching
34 Refactoring for Vendor Splitting
35 Effect of Code Splitting
36 Troubleshooting Vendor Bundles
37 Chunk Hashing for Cache Busting
38 Cache Busting Wrapup
39 Cleaning Project Files

Webpack Dev Server
40 Introduction to Webpack Dev Server
41 Gotchas with Webpack Dev Server
42 Webpack 2

React-Specific Topics
42 React Router with Codesplitting
43 Plain Routes with React Router Codesplitting

Webpack-Based Deployment for Static Sites
44 Deployment Options
45 Getting Production Ready
46 Deployment with Surge Easiest
47 Deployment with Github Pages
48 Deployment with AWS S3

Webpack-Based Deployment for Dynamic Sites
49 Deployment of Servers
50 Node and Webpack Integration
51 Webpack Middleware in Development
52 Webpack Middleware in Production
53 Deployment to Heroku
54 Deployment to AWS
55 More on AWS Deployment