CF

Webpack 4: Beyond the Basics

5h 26m 56s
English
Free

Webpack 4: Beyond the Basics is a 40-lesson 5 hours 26 minutes self-paced course by Udemy. Welcome to the Web Hacker's Cookbook!

Course facts

Lessons
40
Duration
5 hours 26 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Free

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.

Who teaches Webpack 4: Beyond the Basics? 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.

What lessons are included in Webpack 4: Beyond the Basics?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1How to get help with this Course 01:10
2Additional Course Materials and Code 01:36
3Up and Running with Webpack Dev Server 07:38
4Our First Loaders for CSS 05:24
5Better Errors and Loaders for HTML & Images 10:41
6Babel Basics 04:11
7Babel Polyfills, Transforms & Presets 07:55
8DIY Webpack Dev Server with Express Middleware 09:57
9Hot Reloading Both Client and Server 05:45
10Debugging Node with Chrome DevTools 05:29
11Hooking Up React 06:51
12Hooking up React - Part 2: Stateful Reloading 09:40
13Hooking up HTML Preprocessors like EJS/Pug/Handlebars 08:09
14Hooking up CSS Preprocessors like SASS/LESS & Stylus 11:34
15Hooking up Typescript 2 06:42
16Hooking up Angular 5 13:36
17Setup Production Hosting with Heroku 09:39
18Production Ready CSS 07:03
19Optimizing Javascript with Environment Variables 07:22
20Optimizing Javascript with Minification and Mangling 07:16
21Optimizing All Assets with GZip and Brotili Compression 07:33
22Building out the Blog with React 06:06
23Parsing Markdown for Blogging and Meta Data 08:11
24SplitChunks and the Bundle Analyzer 06:42
25Server-side Render JS with Express and React 09:19
26Server-side Render any Filetype with Webpack 07:22
27Unified Compilation - Part 1 07:45
28Unified Compilation - Part 2 09:38
29Adding Multiple Pages with React Router 11:05
30Dynamic Import Syntax 03:58
31React Universal Components 09:55
32Async JS/CSS Chunk Loading in Parallel (aka the Holy Grail) 11:18
332 Strategies for Multiple-Domains in Development 08:28
34Scoping Your Data per Domain 10:40
35Theming CSS per Domain 07:28
36Build out the Articles Pages for our 2 Heroes 16:21
37Redux Basics: The store, the reducer and the action. 10:53
38Fetching Articles from an API with Redux Thunk 12:01
39Webpack 4 Upgrade Guide 13:31
40What do you want to see next? 01:04

What courses are similar to Webpack 4: Beyond the Basics?

More courses by Udemy

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.