The full video and many others like it are all available as part of our Frontend Masters subscription.

Kent C Dodds

Kent C. Dodds works at PayPal as a full stack JavaScript engineer. He host JavaScript Air and co-hosts React30 podcasts. Kent is an Egghead.io instructor and Google Developer Expert.

Kent C Dodds

PayPal

Kent C. Dodds opens his workshop on Webpack 2.0 by setting some expectations for what he will be covering. Kent outlines the requirements for running the workshop exercises and walks through the setup. Every exercise has its own branch in the Github repository. Links to solutions are located on each slide.
- http://slides.com/kentcdodds/webpack-deep-dive , https://github.com/kentcdodds/es6-todomvc

Get Unlimited Access Now

Kent C Dodds: I like that we can have such a diverse group of people all learning similar technologies and solving very different problems all over the world. I think that's cool. And I appreciate you all taking some time to learn about something that I care about which is Webpack, I love Webpack.

And that's what this workshop is about. So I like to set up expectations so that you're not just kind of sitting waiting for something that's never going to happen. So we're going to be migrating an existing JavaScript application to Webpack 2. That's the entire course is migrating this application.

It's pretty basic, no build system at all applications, so you've got an index HTML with some script tags and some CSS. So pretty basic, and we are using Webpack 2. So it's, I don't think that it's really useful to teach you a technology that's about to get a major upgrade.

Especially when Webpack 2, not only is it really good, the beta is really good, but it's almost released, they've pretty much committed to the end of August. So that's pretty exciting. And the main thing that's holding it back is documentation, which yeah, that's that. Webpack is getting a whole ton of attention now, especially since the Angular CLI has adopted it as it's kind of under workings.

And then React has the Create React App that's using Webpack. So it's like this is the thing to know these days. So it's awesome. So yeah, Webpack is getting a lot more attention than it already has. And it's going to just keep getting better. So yeah, we will be doing Webpack 2.

We're going to do unit testing, because unit testing I think everybody appreciates the value of testing. And appreciates how difficult tooling is to set up, and that's what this whole workshop is about, the workshops about tooling. So we'll be using Mocha, anybody here familiar with Mocha, use Mocha?

Cool, okay. Anybody use Karma? Yeah Karma, who uses Karma? So anybody used Jasmine? Okay, sweet Jasmine is awesome too. I prefer Mocha. Chai, anybody used Chai before? Okay, yeah, we'll be using Chai. Cool. And then we'll be using all these features that I have listed here, tree-shaking, code splitting, hashing for long term caching, chunking, service worker and more.

So if you don't know all those terms you'll know them well. That's great because that's what you're here for. And we're going to be talking about that. And then we'll be deploying the app to surge.sh. Who is familiar with that service? Okay, it's great, it's a CDN that basically you just give it static files and it's really, really fast.

Yeah, and it's like caching strategy is really great too and it g-zips your stuff for you, it's awesome. So by the end of the day, you will all have to do MVC, deploy it to your own surge.sh URL. So that'll be fun. You can share with your friends and write down todos and stuff.

So a couple things that we're not going to get too far into. So I'm not going to talk about every feature available in Webpack or its ecosystem. We're not actually going to write plugins or loaders unless we have time. I have written a plugin and some loaders. And so if we have time at the end then maybe we'll look into it but I don't have anything in this module.

In the pre-event survey that I sent out, several of you were really hoping to get into plugins and loaders and writing your own. Let me just say that I have been using Webpack for over a year and a half and I have only needed to write a custom plugin or loader like a couple times.

There are so many plugins and loaders already that you generally don't need your own and the documentation is improving. So writing writing these is becoming easier. And then also lots of the features that I'm going to be talking about are not really applicable to every application that you can possibly dream up.

For some applications long term hashing and/or long term caching of assets, is actually not the best approach. It just kind of depends on the type of application you're using. Also for an Angular 1 app, it's pretty difficult to do code splitting just because of the way that Angular 1 works.

And so some of these features may not apply to or be useful for all applications, so just be aware that. Hopefully, you all have everything set up. These are the things that you definitely are going to need. I tried to do something this morning or last night to make it so you wouldn't need node version 6 version, version 4 or even an older version of node would suffice.

But I haven't actually tested that. So, hopefully, everybody has node 6. It should work with node 6 and also it should work with Windows. I know that there have been a little bit of difficulties with Windows and I tried to fix most of those things last night. If you have linting problems ask Kent back there because he has linting problems too with Windows.

And hopefully we can work together to figure out what that problem is. Luckily, linting isn't like critical to this workshop so. Okay, so let's go ahead and get started. This is the set up. I'm actually just going to go back up to where I copied this in the chat somewhere I copied the set up, I'm going to chat it again.

So if you need that, that is what you need to be doing while I'm getting started talking. By the end of it, you should be able to run npm start and then open up a localhost 8080 and this is what you should see. If you don't see that, then there is a problem.

And after I finish talking I'll double check, or you can ask your neighbor. But that would be yeah, you need to have this up before we can actually start working on the workshop.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now