Webpack 4: Beyond the Basics (Udemy.com)

Quick, code-driven, follow-along Javascript tutorials of Webpack, Babel, React, Angular, Vue, Redux, SSR, Typescript

Created by: Lawrence Whiteside

Produced in 2018

icon
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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 80 / 100

icon
Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a redux course? Or looking for more detail on Lawrence Whiteside's Webpack 4: Beyond the Basics? Feel free to chat below.
Join CourseDuck's Online Learning Discord Community

icon
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.
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.

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

icon
Instructor Details

Lawrence Whiteside

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.

icon
Reviews

4.0

50 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

I knew very little about npm, webpack, Babel, or Node, and this class was very informative. It is much quicker to start from this course rather than a patchwork of blogs, manuals, and StackOverflow posts.

I used to really wonder about how things happen in webpack. I tried a lot earlier but I just got stuck on one or other point. This course really enlightened me with configuration of webpack. I will definitely recommend this course to anyone who is interested in webpack.

The course is out of data, but, with a little effort and adaptations I was able to keep it going with latest version of Webpack.

Intermediate JS programmers will love this course. Please do more like that

Very detailed in terms of the scenarios and cases it covers. After the course I feel like I could use the boilerplate in another project, but what is missing is an explanation of what each plugin/loader does and why they were selected.

Great course but needs to be updated for latest versions of babel and node

I would have organized the github branches a bit better naming conventions should be like :02_01_before 02_01_after, your current naming conventions are slightly confusing.Some of the github branches are not exactly up to date with the videos. For example, in hot-server you are completely missing some plugins in the webpack prod and dev config files. This can be very confusing.

I'm at video #10. So far so good. Learned new things (this is my 2nd course about webpack) and helps me build my own webpack configuration and also gives me more understanding about webpack.The screen should be zoomed in. Cannot see clearly the code.Update: I'm at video #20. The author is doing some experiments with the sound and sometimes it distracts me.In one video he had applied a filter at his voice but at the most videos so far there are no filters.At this video his voice is little faster than in other videos.At most videos you can hear the hiss coming in and out.Advice: There should be consistency at the sound at leastUpdate: I'm watching these videos at 24'' monitor and many times is not enough. The author has splited his screen in 2 parts to show the terminal window and the browser window and some times he splits at 2 more parts the browser window to show the browser console, which makes it really difficult for me to follow

The content of this course is a good, solid introduction to Webpack and its use with various frontend frameworks and templating schemes. It also provides useful information on using Webpack with SSR.Unfortunately, there are currently some discrepancies in the code from lesson to lesson, and in the code presented in the lessons vs. the code available from the author's github repo. Whether you try to follow along the whole time, or you choose to checkout a new git branch for each lesson, it is sometimes the case that the code you are working with does not match the code in the current lesson. In a couple of cases, the code provided in the various lesson git branches is incomplete and requires patching it up with code from other branches to get it to work with the current lesson.Overall, the information presented in this course is clear and useful, but the experience of following along with the lessons is at times unnecessarily frustrating.

Thank you very much for the excellent course. I learned a lot about setting up a kick-ass dev environment.

I feel that there could be more of a pause when adding code, so that it is easier to follow along and I don't need to stop/start the video so often.

It's so amazing of how much knowledge is bundled in this course... I have knowledge packed course. I've got used to to speed after a while.