Webpack 2 Deep Dive Loaders and Plugins
This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Loaders and Plugins" Lesson
>> Kent C Dodds: There are two other really important concepts with how webpack accomplishes what it's doing. The first is loaders, and so, if I wanted to write ES6 or TypeScript, then I would have a loader. So in this case, Babel, or the TypeScript loader. There are six TypeScript loaders. I don't use TypeScript but I know that one of them is starting to become king.
>> Speaker 2: Stream.
[00:00:59] This is the CSS Modules logo. It doesn't have to be like CSS Modules, but webpack enables CSS Modules and it's awesome. You should look into it later, we're not gonna talk about it today. So you take your CSS and you say, hey webpack, I want you to send that through the PostCSS loader or the SaaS loader or whatever, whatever you wanna author your CSS in.
[00:01:23] And it will spit out CSS for you and then webpack will take that, resolve all the dependencies, and then bundle it for you in your bundle. Yeah?
>> Speaker 3: So if I am targeting ES6, I don't need to run through Babel, right?
>> Kent C Dodds: Yes, that's right.
>> Speaker 3: But this is only if I'm targeting today's browsers.
>> Kent C Dodds: That's right, or ancient browsers cuz most of today's browsers are pretty well compliant with ES6. Yeah, because Edge is almost 100% and stuff. So good question, so yeah, and even if you are targeting today's browsers, there are likely features like async await maybe or some ES2016 features that you wanna use.
[00:02:02] Cuz we all know when you just wanna use the exponentiation operator and yeah.
>> Students: [LAUGH]
>> Kent C Dodds: [LAUGH] It's like 2, it saves you a couple characters of math.pwo but anyway.
>> Students: [LAUGH]
[00:02:33] Just because there will always be features that are really nice to be using and it's kind of a given that you're going to be using a toolchain anyway. May as well just stick Babel in there and then so, images of the same thing. So remember that everything is a module, so you can say, hey take all my image modules and load them through a couple of webpack loaders.
[00:02:55] There's URLLoader or a file-loader and turn it into a Base64 string that I can use in my application. Or if it's too big, then I just want a URL for wherever that image is gonna be and webpack will give you a URL and make sure that the image is accessible at that URL.
[00:03:32] Which, actually, nothing has changed as a result of that loader. Pass that onto the Babel loader and then Babel will transpile it, and then that's the end of the chain and then webpack will just use that. Or we'll look at chaining a little bit with our CSS and I'll explain a little bit more about how the CSS loader works and the style loader because they're a little bit on the unique side.
[00:03:56] But yeah, chaining loaders, that's really common. And loaders are how you take each file and do something to it before webpack takes over and does some magic to the resolution and bundling stuff. Any questions about loaders?
>> Kent C Dodds: Okay, this is either really good and you're all getting it, or you're shy.
[00:04:19] Yeah, we'll get a good cadence. Nothing from online, so keep going. So plugin side of things, yeah, plugins do everything else, so there are a bunch of random words and stuff on there. We'll talk about some of these plugins but the CommonsChunkPlugin, we'll use this to take things that we want to have in a separate bundle altogether.
[00:04:44] So that when there are changes to our code that separate bundle doesn't need to be changed and the browser can keep that cache. Lodash, anybody use Lodash here? Yeah, awesome, and if you're at home you can raise your hand and your wife's like, what the? [LAUGH] But yeah, so Lodash has a really cool plugin that will really shrink the size of Lodash.
[00:05:04] Lodash is an enormous library and it's enormously valuable but yeah, it's really big and so there's a really cool plugin to shrink it considerably. Also, a Babel plugin as well to enable you to use tree-shaking which we'll talk about later too, it's really cool. There's a GZip plugin, which we won't use but it's interesting.
[00:05:26] We won't use it because we're deploying to a service that GZips for us. The PrefetchPlugin, we actually won't use that either because the Service Workers plugin that we're gonna use will prefetch all of our chunks for us. It's going to be so cool!
>> Students: [LAUGH]
>> Kent C Dodds: Hang on with me toward the end.
[00:05:45] When I realized it was doing this, I was like what! Yeah, I'm really excited to show you that one, yeah.
>> Speaker 5: There was a question if we'll be seeing an example of using webpack on CSS and images.
>> Kent C Dodds: Yes.
>> Speaker 5: Perfect.
>> Kent C Dodds: Well, on CSS there won't be any images yet but we will be doing CSS.
[00:06:05] Talk to me after, whoever that was, and I can show you an example of that. It's fairly straightforward. You kind of write everything the same way you normally would and you just add another loader. Good question. ExtractTextWebpackPlugin, we'll talk about that. There's even a plugin to automatically upload your bundle to S3, which that was kind of cool.
[00:06:30] The DedupePlugin is pretty awesome because NPM kind of gets a bunch of flack for having a whole bunch of little modules and then you install these little modules and then you have duplications or something. So the npm-dedupe command will kinda fix that problem and npm3 actually dedupes your dependencies anyway.
[00:07:11] So I've seen that shrink my build a little bit as well. So yeah, plugins are pretty much responsible for optimizing your resulting bundle and then doing stuff with the resulting assets as well.