Webpack 4: Beyond the Basics
Course 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.
Read more about the course
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.
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.
- 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.
What you'll 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
Watch Online
Watch Online Webpack 4: Beyond the Basics
All Course Lessons (40)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | How to get help with this Course Demo | 01:10 | |
| 2 | Additional Course Materials and Code | 01:36 | |
| 3 | Up and Running with Webpack Dev Server | 07:38 | |
| 4 | Our First Loaders for CSS | 05:24 | |
| 5 | Better Errors and Loaders for HTML & Images | 10:41 | |
| 6 | Babel Basics | 04:11 | |
| 7 | Babel Polyfills, Transforms & Presets | 07:55 | |
| 8 | DIY Webpack Dev Server with Express Middleware | 09:57 | |
| 9 | Hot Reloading Both Client and Server | 05:45 | |
| 10 | Debugging Node with Chrome DevTools | 05:29 | |
| 11 | Hooking Up React | 06:51 | |
| 12 | Hooking up React - Part 2: Stateful Reloading | 09:40 | |
| 13 | Hooking up HTML Preprocessors like EJS/Pug/Handlebars | 08:09 | |
| 14 | Hooking up CSS Preprocessors like SASS/LESS & Stylus | 11:34 | |
| 15 | Hooking up Typescript 2 | 06:42 | |
| 16 | Hooking up Angular 5 | 13:36 | |
| 17 | Setup Production Hosting with Heroku | 09:39 | |
| 18 | Production Ready CSS | 07:03 | |
| 19 | Optimizing Javascript with Environment Variables | 07:22 | |
| 20 | Optimizing Javascript with Minification and Mangling | 07:16 | |
| 21 | Optimizing All Assets with GZip and Brotili Compression | 07:33 | |
| 22 | Building out the Blog with React | 06:06 | |
| 23 | Parsing Markdown for Blogging and Meta Data | 08:11 | |
| 24 | SplitChunks and the Bundle Analyzer | 06:42 | |
| 25 | Server-side Render JS with Express and React | 09:19 | |
| 26 | Server-side Render any Filetype with Webpack | 07:22 | |
| 27 | Unified Compilation - Part 1 | 07:45 | |
| 28 | Unified Compilation - Part 2 | 09:38 | |
| 29 | Adding Multiple Pages with React Router | 11:05 | |
| 30 | Dynamic Import Syntax | 03:58 | |
| 31 | React Universal Components | 09:55 | |
| 32 | Async JS/CSS Chunk Loading in Parallel (aka the Holy Grail) | 11:18 | |
| 33 | 2 Strategies for Multiple-Domains in Development | 08:28 | |
| 34 | Scoping Your Data per Domain | 10:40 | |
| 35 | Theming CSS per Domain | 07:28 | |
| 36 | Build out the Articles Pages for our 2 Heroes | 16:21 | |
| 37 | Redux Basics: The store, the reducer and the action. | 10:53 | |
| 38 | Fetching Articles from an API with Redux Thunk | 12:01 | |
| 39 | Webpack 4 Upgrade Guide | 13:31 | |
| 40 | What do you want to see next? | 01:04 |
Unlock unlimited learning
Get instant access to all 39 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses
Webpack 5 in 2023 The Complete Guide For Beginners
Want to join the conversation?
Sign in to comment