Note: This course was created by Frontend Masters. It was originally released on 8/8/2016. We're pleased to host this training in our library.
- Initializing webpack
- Development vs. production environments
- Debugging webpack
- Loading CSS
- Testing with webpack
- Coverage basics
- webpack optimizations
- Tree shaking
- Code splitting
Skill Level Intermediate
(adventurous music) - 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.
You've got an index HTML with some script tags and some CSS. So pretty basic and we are using Webpack Two so I don't think that it's really useful to teach you technology that's about to get a major upgrade, especially when Webpack Two is... 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.
The main thing that's holding it back is documentation which that's that. They're actually, Webpack is getting a whole ton of attention now, especially since the Angular CLI has adopted it, kind of its under workings. Then React has their Create React app that's using Webpack so it's like this is the thing to know these days. It's awesome. Webpack is getting a lot more attention than it already has. It's going to just keep getting better.
We'll be doing Webpack Two. 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. That's what this whole workshop is about tooling. So we'll be using Mocha. Anybody here familiar with Mocha? Use Mocha? Cool. Anybody use Karma? Or sorry, well yeah, Karma. Who uses Karma? So anybody use Jasmine? Okay, sweet.
Jasmine is awesome too. I prefer Mocha. Chai, anybody use Chai before? Okay, yep, 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 or know them well, that's great because that's what you're here for. We're going to be talking about that. 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 caching strategy. It's really great too and it G's up to your stuff for you. It's awesome. By the end of the day you will all have to do MBC deployed to your own surge.sh URL. That'll be fun. You can share it with your friends and write down to-dos and stuff. So a couple of things that we're not going to get too far into. 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.
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 half and I have only needed to write a custom plugin or loader a couple times. There are so many plugins and loaders already that you generally don't need your own. The documentation is improving so writing these is becoming easier.
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 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 One app, it's pretty difficult to do code splitting just because the way Angular One works. Some of these features may not apply to or be useful for all applications.
Just be aware of 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 six but version four would, or even an older version of Node would suffice but I haven't actually tested that. Hopefully, everybody has Node Six. It should work with Node Six. Also, it should work with Windows. I know that there have been a little bit of difficulties with Windows.
I tried to fix most of those things last night. If you have linting problems, ask Kent back there because he has linting problems with Windows. Hopefully, we can work together to figure out what that problem is. Luckily, linting isn't critical to this workshop. Okay, let's go ahead and get started. This is the setup. I'm actually just going to go back up to where I copied this in the chat somewhere. I copied the setup. I'm going to chat it again.
If you need that, that is what you need to be doing while I am getting started talking. By the end of it, you should be able to run NPM start and then open up a local host 8080 and this is what you should see. If you don't see that, then there is a problem. 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.