Webpack Deep Dive

By Kent C. Dodds
Building and deploying complex frontend applications can get complicated. This course covers Webpack, a module bundler which simplifies this with tons of features catering to all JavaScript apps.
Course info
Rating
(14)
Level
Intermediate
Updated
Apr 6, 2018
Duration
5h 26m
Table of contents
Getting Started with Webpack
Workshop Outline 6m Webpack 101 5m Loaders and Plugins 7m Todo App Walkthrough 11m Initializing Webpack 7m Specifying an Entry Point 5m Webpack Validator 7m Webpack Dev Server 9m Path Configuration 11m Minifying and Source Maps 6m Development vs. Production Environments 2m Exercise: Adding Webpack 2m
Working with Webpack
Debugging Webpack 2m Bundling 3m Explicit Dependencies 1m Transpiling with Babel 9m Loading CSS 4m Exercise: Using the Style and CSS Loaders 8m Hot Module Replacement 10m
Testing with Webpack
Exercise: Initializing Karma 11m Exercise: Using Karma with Webpack 7m Using Karma with Webpack Solution 5m Coverage Basics 6m Exercise: Code Coverage 10m Coverage Exclusions and Webpack Middleware 7m Exercise: Coverage Thresholds 9m
Webpack Optimizations
Exercise: ES6ify 1m Tree Shaking 3m Exercise: Adding Tree Shaking 13m Code Splitting 5m Exercise: Using System.import() 14m Using System.import() Solution 11m Commons Chunking 2m Exercise: Adding Commons Chunking, Part 1 12m Exercise: Adding Commons Chunking, Part 2 8m Exercise: Adding Commons Chunking, Part 3 13m Exercise: Longterm Caching 11m Exercise: Extracting CSS, Part 1 6m Exercise: Extracting CSS, Part 2 10m Offline with Service Workers 12m Deploying to Surge.sh 9m Audience Questions and Aphrodite 7m Resources 0m
Description
Course info
Rating
(14)
Level
Intermediate
Updated
Apr 6, 2018
Duration
5h 26m
Description

Building and deploying complex frontend applications can get complicated. This course, Webpack Deep Dive, covers Webpack, a module bundler which simplifies this with a massive list of features that cater to all kinds of JavaScript apps. This course begins with an introduction to Webpack, and helps you get started setting it up. You’ll then gain experience bundling, transpiling, debugging, and testing your application. By the end of this course, you’ll have a better understanding of how to use Webpack to optimize an application for performance and simplicity.

About the author
Kent C. Dodds
About the author

Kent C. Dodds works at PayPal as a full stack JavaScript Engineer.

Section Introduction Transcripts
Section Introduction Transcripts

Webpack Optimizations
Like I said, we're going to skip over the ES6 stuff. I'll just show you briefly that one, just changes require statements to import statements. Now we can have import specifiers to pull out exactly what we want. This looks like that destructuring feature that I was telling you about. It is not, it is not destructuring. You think that it is and then you cry when you find out it's not. I made a big, big mistake for a long time thinking that was-- Well, I knew it wasn't destructuring, but I thought it worked like destructuring and it doesn't. And so, if you want to learn more about that, check out the video I mentioned. But yeah, that's pretty much all this one's doing. If you want to do this in your spare time later, then that is cool, but we're going to skip over that because it's not pertinent to Webpack necessarily. One part about that that is important is that for this tree shaking thing to work that I'm about to show you, your modules do have to be ES6. This doesn't work with CommonJS and it doesn't work with AMD, or Asynchronous Module Definition. If you're not familiar with that, don't worry about it. It's dying and nobody really uses that anymore. So yeah, you do have to use ES6.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT