CF

Webpack 4: Beyond the Basics

5h 26m 56s
English
Paid

Welcome to the Web Hacker's Cookbook! This course will guide you through building modern JavaScript applications using the Webpack module loader and asset bundler. Designed for those who have explored Webpack basics but seek a deeper understanding, this course ensures every moment is valuable with well-rehearsed and edited lessons tailored for all skill levels.

Course Overview

Tackle real-world projects as we build practical Webpack apps from scratch. We will begin with the ideal Webpack development setup, focusing on creating a Markdown blog similar to Ghost. This includes Hot Module Reloading, Babel, and Node debugging. Then, we'll explore Webpack's production optimization features, transforming our boilerplate into a functional portfolio website.

The Final Project

The ultimate challenge is extending our portfolio site into a multi-domain node application that mimics WordPress MU, Tumblr, or SquareSpace, all managed from a single node server. We'll dive deep into Webpack 4's latest features, covering Server-side Rendering, dynamic imports with "magic comments," Universal React components, and CSS Chunks in Parallel. This end-to-end journey promises to be both educational and rewarding.

Frameworks and Integrations

This course will also cover the various frameworks and libraries integrated with Webpack. Whether you're enhancing a legacy Rails project or crafting new designs using EJS, Pug, Handlebars, Sass, Less, Stylus, CSS Modules, Angular, or Vue JS, you'll gain the tools to build your site exactly as desired.

Requirements

  • You should have some initial training or experience with coding and software installation.
  • A strong desire to delve quickly into the intricacies of libraries and frameworks is essential.
  • An understanding of the command line, a code editor, and readiness to follow along are required.

Target Audience

Who this course is for:

  • Individuals seeking in-depth, visual, code-driven guidance beyond the standard Webpack setup.
  • Those interested in exploring real-world Webpack challenges and unusual cases not covered elsewhere.
  • Anyone eager to deepen their knowledge of modern JavaScript development beyond their peers.

Learning Outcomes

What you'll learn:

  • Create a custom Hot-reloading Webpack boilerplate from scratch.
  • Optimize frontend assets for efficient, compact production code.
  • Build a portfolio or blog platform utilizing Markdown for content creation.
  • Engage in deep explorations of Webpack Plugins and Loaders.
  • Achieve seamless Server-side Rendering with parallel Code Splitting in Webpack.
  • Understand the internal mechanics of Webpack, Babel, Node, and various JavaScript libraries.
  • Develop a multi-domain application akin to SquareSpace, WordPress MU, or Tumblr.
  • Utilize Chrome DevTools for code debugging, inspection, and performance auditing.
  • Secure online applications with SSL and deploy to Heroku for cloud hosting.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 40 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 40 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: How to get help with this Course
All Course Lessons (40)
#Lesson TitleDurationAccess
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 subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course is designed for individuals who have already explored Webpack basics and are seeking a deeper understanding of its features. Familiarity with JavaScript and basic Webpack concepts is recommended to maximize learning outcomes. The course is tailored for learners at different skill levels, but a foundational knowledge of web development will be beneficial.
What project will I build during the course?
Participants will build a Markdown blog similar to Ghost, a functional portfolio website, and extend it into a multi-domain node application mimicking platforms like WordPress MU, Tumblr, or SquareSpace. These projects provide practical experience with Webpack's development setup, production optimization features, and server-side rendering capabilities.
Who would benefit most from taking this course?
This course is ideal for web developers looking to advance their skills in building modern JavaScript applications using Webpack. It is particularly beneficial for those interested in enhancing legacy projects or crafting new designs with various frameworks and libraries, such as React, Angular, or Vue JS.
What specific tools and technologies are covered in the course?
The course covers a range of tools and technologies, including Hot Module Reloading, Babel, Node debugging, Express middleware, React, Angular, and CSS preprocessors like Sass, Less, and Stylus. It also explores features like dynamic imports, server-side rendering with Express, and environment-based JavaScript optimization.
What topics are not covered in the course?
The course does not cover Webpack basics in detail, as it assumes prior knowledge of fundamental concepts. It focuses on advanced features and real-world applications of Webpack, leaving out introductory material that may be found in beginner courses.
How much time should I expect to commit to this course?
The course consists of 40 lessons, carefully structured to ensure effective learning. While the exact runtime is not specified, students should allocate sufficient time to engage with the lessons, complete the practical projects, and explore additional course materials and code provided.
How does this course prepare me for further learning or career advancement?
Completing the course equips you with advanced skills in Webpack, enhancing your ability to build modern web applications. This knowledge is transferable to various web development frameworks and environments, making it valuable for career advancement in roles requiring expertise in JavaScript, React, Angular, and other modern web technologies.