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
Last updated July 2018
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
How it compares
Against the other 239 rated Udemy courses in JavaScript on CourseDuck:
- Rating4.5 out of 5higher than 53% of them
- Reviews3,168#46 of 240 by number of reviews
- Length6.1 hourslonger than 54% of them
- Last updatedJuly 2018earlier than 82% of them
Quality Score
Overall Score : 90 / 100
Course Description
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
Instructor Details
- 4.5 Rating
3,168 Reviews
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.
More JavaScript courses
The Modern Javascript Bootcamp Course (2026)
4.9 (13,238 Reviews)
Provider: Udemy
Time: 51.9h
$24.99
JavaScript: Understanding Advanced ES Next (ES6 and Beyond) (2025)
4.9 (1,076 Reviews)
Provider: Udemy
Time: 3.5h
$79.99
Reviews
By P G on 6/17/2020
A fast-paced, dense Webpack walk-through. The first part touches the basics but the second part is where things get really interesting: server-side rendering, React routing etc. Most Webpack courses cover more or less the same basic topics: plugins, loaders, dev/production mode; that's basically it. In this course instead, the teacher (a Pro with many years experience) explains so many configuration tricks. I dare say, you may not find such in-depth explanations in many other places.
By Patrick Ryll on 10/23/2018
Great course; really thorough! Definitely an advanced course, but he really covers all the bases, both obvious and obscure. I was a bit disappointed that it covered Webpack 3 but I understand since it seems he completed the course right BEFORE Webpack 4 came out. But then I loved the way he acknowledged this and then had an update video that showed how to reconcile it with Webpack 4. I am writing this in late October; would love to see another course on Webpack 4 now that some of the features have had time to set and be updated.
By Hanna Söderström on 10/7/2018
I haven't looked into Webpack since v2 and I always struggle with the configuration when I set up a new project, so I felt it was time to refresh my knowledge, and found this course. I'm glad I did, because it is a comprehensive guide to Webpack 4 and its setup with real world applications that you most likely will have use for instantly. From setup for development to optimization for production, as well as a guide to server-side-rendering with React, which could have been a course on its own, but is now included! Great course, I will definitely look for more from this awesome author!
By Jeremy Cobb on 9/12/2018
So far the course is pretty good, I am learning a lot about webpack. It moves fast, but if you're familiar with webpack you should be good. My biggest issue is that as the course moves along, some packages are declared in the package.json while some modules installed during videos are installed globally. This can make picking up from other branches hard, as you'll be missing dependencies. Maybe the instructor has his reasons for installing globally, but IMO it shouldn't be necessary. Another thing is the packages installed during the video aren't done so with a specific version, so I have ran in to conflicting version issues a few times.
By Cseh Szabolcs on 8/7/2018
This is a good course to learn webpack in detail with babel. But this course could have more background-informations. Just an example on section 2.7 with babel-presets: "we gonna add an another plugin, the babel-transform-plugin .... and in the main.js we include the babel-runtime/regenerator" - and that's it. There is no explanation what the babel-transform-plugin has to do with the presets, or what the babel-runtime/regenerator will do, why it has to be included in the main.js-file and not somewhere else, maybe in the config. For me its easier to find everything on the online-documentations.
By Cassss on 5/28/2018
I've already used Webpack in production projects, but the config was usually generated and only tweaked slightly by hand. Prior to this course I wrote a Webpack config from scratch for a very basic web app. This course has given me a deeper understanding of how Webpack works, and why it works like it does. Writing a new config or changing an existing one doesn't seem like a big deal anymore. I can easily get annoyed by people's voices in tutorials and podcasts, but I enjoyed listening to Law! The pace suited me too. Section 6 didn't seem to fit very well with the rest of course - the multi-domain, Redux, and Thunk didn't have much to do with Webpack. It was still interesting, but I went through it on 1.5x speed without trying things out myself. In the future I'd love to see a Webpack setup for SSR/HMR/etc with Vue, and maybe some more advanced stuff on Webpack internals :)
By Tetiana Stepova on 5/10/2018
practical approaches were really cool. optimization and comprassion - are my favorite lectures. but the majority of the course was confusing for me, because i was expecting more attention to webpack4, as it's in the title. there were only several moments and the last lecture about it, the course is more like making blog with webpack3 and migrating to webpack4. If I saw such title, i wouldn't expect much of comparison in videos and also wouldn't be confused hearing "this is how webpack 3 does" in this course... beyond that, there were really great things shown. Sometimes I really missed more background explanations before words "let's install/import" in first lectures to see the full picture, because i am a beginner. Everything else was good. Thanks.
By Marcel Hinderlich on 3/31/2018
Der Kurs ist aktuell sehr relevant für mich, da wir aktuell bei der Arbeit genau das Setup React+Nodejs verwenden konnte ich hier einige Ansätze mitbekommen habe die uns im Projektverlauf weiterhelfen werden. Sehr gute Vermittlung von Best Practises. Sehr gut finde ich auch die einzelnen Steps im Git Repository um alles nachvollziehen zu können. Vielen Dank für die wunderbare Erklärung und Zusammenstellung der wichtigsten Themen bzgl. Webpack, SSR, React und Projektsetup. Ich freue mich auf weitere Kurse.
By Karol Stopyra on 2/4/2018
I liked idea of the author to go from simplest webpack config to really advanced topics like server-side rendering config and react universal components etc. I was not expecting this and it moved forward my learning not only about webpack. The ambition of author is to make this course evergreen which I would welcome as well (Webpack 4 on the way). Well spent money.
By Pierrick Le Roy on 1/18/2018
I was able to set up a complete development environment with Express, Pug and sass pretty easily and I understood a bunch of new concepts along the way. The teacher is clear and easy to follow. The course is short, that's a good point. I can say that I have a good grasp on the material and concepts after following the course. I will start the production environment in a couple of days. the course also covers server side rendering with React which is very cool.
By Dev BunnyDev
I really like how Lawrence explained things and implemented on real-life problems we face as developers.
By Anonymized User
The course was as described...beyond the basics. If you're an experienced developer, it shouldn't be difficult to follow along, even if you have no webpack experience. That being said, it would be great to know how and why Lawrence chose the packages he did throughout the video.





