Webpack 4- Beyond the Basics

Webpack 4: Beyond the Basics, available at Free, has an average rating of 4.63, with 53 lectures, based on 2992 reviews, and has 32853 subscribers.

You will learn about 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 This course is ideal for individuals who are Anyone who wants visual, code-driven guidance through more than the usual webpack setup. or Anyone who wants to see working examples of real-world webpack weirdness and edge-cases not covered in other courses. or Anyone who wants to know way more than their co-worker about modern javascript development. It is particularly useful for Anyone who wants visual, code-driven guidance through more than the usual webpack setup. or Anyone who wants to see working examples of real-world webpack weirdness and edge-cases not covered in other courses. or Anyone who wants to know way more than their co-worker about modern javascript development.

Enroll now: Webpack 4: Beyond the Basics

Summary

Title: Webpack 4: Beyond the Basics

Price: Free

Average Rating: 4.63

Number of Lectures: 53

Number of Published Lectures: 44

Number of Curriculum Items: 53

Number of Published Curriculum Objects: 44

Original Price: Free

Quality Status: approved

Status: Live

What You Will Learn

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

Who Should Attend

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.

Target Audiences

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.

Welcome to the course 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.

– Law

Course Curriculum

Chapter 1: Introduction

Lecture 1: How to get help with this Course

Lecture 2: Additional Course Materials and Code

Chapter 2: Reactive Development (aka Optimal Dev Experience)

Lecture 1: Up and Running with Webpack Dev Server

Lecture 2: Our First Loaders for CSS

Lecture 3: Better Errors and Loaders for HTML & Images

Lecture 4: Babel Basics

Lecture 5: Babel Polyfills, Transforms & Presets

Lecture 6: DIY Webpack Dev Server with Express Middleware

Lecture 7: Hot Reloading Both Client and Server with Nodemon

Lecture 8: Debugging Node with Chrome DevTools

Chapter 3: Choose Your Own Adventure

Lecture 1: Hooking Up React

Lecture 2: Hooking up React – Part 2: Stateful Reloading

Lecture 3: Hooking up HTML Preprocessors like EJS/Pug/Handlebars

Lecture 4: Hooking up CSS Preprocessors like SASS/LESS & Stylus

Lecture 5: Hooking up Js in CSS with Emotion and CSS Modules

Lecture 6: Hooking up Typescript

Lecture 7: Hooking up Angular

Lecture 8: Hooking up VueJS

Chapter 4: Optimizing for Production

Lecture 1: Setup Production Hosting with Heroku

Lecture 2: Production Ready CSS

Lecture 3: Stripping development-only Javascript with the DefinePlugin

Lecture 4: Javascript Minification and Mangling with Babel and Uglify

Lecture 5: Optimizing All Assets with GZip and Brotili Compression

Lecture 6: Building out the Blog with React

Lecture 7: Parsing Markdown for Blogging and Meta Data

Lecture 8: SplitChunks and the Bundle Analyzer

Chapter 5: Server-side Rendering & Dynamic Importing

Lecture 1: Server-side Render JS with Express and React

Lecture 2: Server-side Render any Filetype with Webpack

Lecture 3: Unified Compilation – Part 1

Lecture 4: Unified Compilation – Part 2

Lecture 5: Adding Multiple Pages with React Router

Lecture 6: Dynamic Import Syntax

Lecture 7: React Universal Components

Lecture 8: Async JS/CSS Chunk Loading in Parallel (aka the Holy Grail)

Chapter 6: Building a Multi-Domain?Site with Redux integration

Lecture 1: 2 Strategies for Multiple-Domains in Development

Lecture 2: Scoping Your Data per Domain

Lecture 3: Theming CSS per Domain

Lecture 4: Build out the Articles Pages for our 2 Heroes

Lecture 5: Redux Basics: The store, the reducer and the action.

Lecture 6: Fetching Articles from an API with Redux Thunk

Lecture 7: Redux on the client. Finishing our Article fetch

Lecture 8: Redux stores in the Server side render

Chapter 7: Appendix

Lecture 1: Webpack 4 Upgrade Guide

Lecture 2: What do you want to see next?

Instructors

Lawrence Whiteside
Software Engineer

Rating Distribution

1 stars: 29 votes

2 stars: 50 votes

3 stars: 287 votes

4 stars: 1143 votes

5 stars: 1483 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!