Webpack 4: Beyond the Basics

Quick, code-driven, follow-along Javascript tutorials of Webpack, Babel, React, Angular, Vue, Redux, SSR, Typescript
Rating: 4.7 out of 5 (936 ratings)
19,607 students
Webpack 4: Beyond the Basics
Rating: 4.7 out of 5 (936 ratings)
19,607 students
Roll your own Hot-reloading Webpack boilerplate from scratch.
Optimize your Frontend Assets for Quick, small Production Code.
Build a Portfolio or Blog with Markdown Based Posts
Deep dives into code, including Webpack Plugins and Loaders
Achieve the "Holy Grail" of Webpack: Server-side Rendering while Code Splitting in Parallel.
Grok the internal workings of Webpack, Babel, Node and more Javascript libraries.
Build a Multi-domain app like SquareSpace, Wordpress MU or Tumblr
Use the Chrome DevTools to debug, inspect and audit the performance of their code.
Secure Your Site in the Cloud with SSL and Heroku

Requirements

  • You should have some initial training or experience working with code and installing programs.
  • You should have a desire to move quickly and dive deeply into the why and how of these libraries
  • You should know what the command line is and have a code editor and be prepared to follow along.
Description

Welcome to the web hacker's cookbook for building modern javascript applications using the Webpack module loader and asset bundler.

I aim to make this Beyond the Basics course accessible to all skill levels.  It's geared towards people who've seen the basics and messed around a bit, but still don't feel they understand Webpack. Each episode is written and rehearsed beforehand. They're edited so as to make best use of your time. There's not a wasted moment in any of these lessons.

With project centered content building real-world Webpack apps that you and your company can use from the very first line of code.  First we look at the optimal Webpack development setup . Follow and code along as we build a Markdown blog, like Ghost, with Hot Module Reloading, Babel, and debugging in Node. We then move into how Webpack optimizes your production bundles, as we solidify the boilerplate into a portfolio website.

The final project is a doozy. We expand the portfolio site to a multi-domain node rewrite of Wordpress MU, Tumblr or SquareSpace.  So you can run multiple domain names from a single node server process.  We dig into the latest Webpack 4 features, including Server-side Rendering, dynamic imports with "magic comments" and we finish with Universal React components and CSS Chunks in Parallel.  You will definitely want to get to the end of this course.

Along the way I'll discuss all the frameworks and libraries Webpack integrates with.  Whether you're working on an legacy Rails or other backend project or just want to create something beautiful with EJS, Pug, Handlebars, Sass, Less or Stylus, CSS Modules, Angular or Vue JS there's a method and I'll give you the keys to build your site the way you want it.

Thank you for considering this course.  I put everything I had into it. I'll add more lessons every couple of weeks. Please enjoy and reach out to me with any questions.  I've love to help and learn what's still confusing.  

- Law

Who this course is for:
  • Anyone who wants visual, code-driven guidance through more than the usual webpack setup.
  • Anyone who wants to see working examples of real-world webpack weirdness and edge-cases not covered in other courses.
  • Anyone who wants to know way more than their co-worker about modern javascript development.
Course content
7 sections • 44 lectures • 6h 3m total length
  • How to get help with this Course
    01:09
  • Additional Course Materials and Code
    01:35
  • Up and Running with Webpack Dev Server
    07:31
  • Our First Loaders for CSS
    05:23
  • Better Errors and Loaders for HTML & Images
    10:30
  • Babel Basics
    04:09
  • Babel Polyfills, Transforms & Presets
    08:07
  • DIY Webpack Dev Server with Express Middleware
    09:56
  • Hot Reloading Both Client and Server with Nodemon
    04:40
  • Debugging Node with Chrome DevTools
    05:26
  • Hooking Up React
    06:49
  • Hooking up React - Part 2: Stateful Reloading
    09:39
  • Hooking up HTML Preprocessors like EJS/Pug/Handlebars
    08:08
  • Hooking up CSS Preprocessors like SASS/LESS & Stylus
    11:33
  • Hooking up Js in CSS with Emotion and CSS Modules
    10:51
  • Hooking up Typescript
    06:40
  • Hooking up Angular
    13:35
  • Hooking up VueJS
    09:31
  • Setup Production Hosting with Heroku
    10:15
  • Production Ready CSS
    07:02
  • Stripping development-only Javascript with the DefinePlugin
    07:21
  • Javascript Minification and Mangling with Babel and Uglify
    07:15
  • Optimizing All Assets with GZip and Brotili Compression
    07:32
  • Building out the Blog with React
    06:05
  • Parsing Markdown for Blogging and Meta Data
    08:10
  • SplitChunks and the Bundle Analyzer
    06:30
  • Server-side Render JS with Express and React
    09:18
  • Server-side Render any Filetype with Webpack
    07:21
  • Unified Compilation - Part 1
    07:44
  • Unified Compilation - Part 2
    09:37
  • Adding Multiple Pages with React Router
    11:04
  • Dynamic Import Syntax
    03:57
  • React Universal Components
    09:54
  • Async JS/CSS Chunk Loading in Parallel (aka the Holy Grail)
    09:36
  • 2 Strategies for Multiple-Domains in Development
    08:27
  • Scoping Your Data per Domain
    10:39
  • Theming CSS per Domain
    07:28
  • Build out the Articles Pages for our 2 Heroes
    16:20
  • Redux Basics: The store, the reducer and the action.
    10:52
  • Fetching Articles from an API with Redux Thunk
    12:00
  • Redux on the client. Finishing our Article fetch
    09:32
  • Redux stores in the Server side render
    10:08
  • Webpack 4 Upgrade Guide
    13:30
  • What do you want to see next?
    01:03

Instructor
Web Architect
Lawrence Whiteside
  • 4.7 Instructor Rating
  • 936 Reviews
  • 19,607 Students
  • 1 Course

Lawrence is a life-long learner who loves teaching, entrepreneurship and remote work. He builds web and mobile apps for a living.  He's been doing it professionally since the mid-90's when both he and the web were very young.  His next challenge is to give back to his developer community by teaching the tools and techniques that are powerfully useful and possibly undocumented. In so doing, he hopes to once again, continue his learning.