This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Workshop Outline" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

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.

Get Unlimited Access Now

Transcript from the "Workshop Outline" Lesson

>> [MUSIC]

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

[00:00:59] 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 gonna happen. So we're going to be migrating an existing JavaScript application to Webpack 2. That's the entire course is migrating this application.

[00:01:16] 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.

[00:01:36] 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 kinda under workings.

[00:02:07] 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 gonna just keep getting better. So yeah, we will be doing Webpack 2.

[00:02:25] 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?

[00:02:44] 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.

[00:03:09] 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 gonna be talking about that. And then we'll be deploying the app to 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.

[00:03:29] 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 URL. So that'll be fun. You can share with your friends and write down todos and stuff.

[00:03:47] So a couple things that we're not going to get too far into. So I'm not gonna 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.

[00:04:08] 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.

[00:04:25] 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 gonna be talking about are not really applicable to every application that you can possibly dream up.

[00:04:45] 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.

[00:05:03] 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 gonna 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.

[00:05:27] 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.

[00:05:49] 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 gonna chat it again.

[00:06:12] 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.

[00:06:31] And [COUGH] 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.