This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Loaders and Plugins" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> 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.
[00:00:25] I think it's like Awesome TypeScript loader or something like that. But yeah, so we say okay, webpack I want you to take all my JavaScript files and pipe them through this Babel loader. You don't use the word pipe, I shouldn't use that word cuz it's like gulp word.
[00:00:40]
>> Speaker 2: Stream.
>> Kent C Dodds: Yeah, like stream it, yeah, you basically just load it, load it through this Babel loader and then the Babel loader will spit out JavaScript at the end. And then webpack will take that and resolve all the dependencies and create the bundle for you, same thing works with CSS.
[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.
[00:01:38]
>> 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]
>> Kent C Dodds: [LAUGH] But it does include includes, array includes and so that's kind of nice. Of course, that's poly fillable, but anyway the point is that you're probably always going to be transpiling your JavaScript whether it's from TypeScript or using Babel.
[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:14] So yeah, that's the whole idea behind loaders. There are hundreds of loaders and you can chain loaders together. So you could say, okay, I want you to take my JavaScript and first load it through the eslint loader to lint all my code and then pass the result of that.
[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:06:52] But to take it even a step further, let's say you had two npm modules that copy pasted some code, like some JavaScript file. The DedupePlugin would be able to tell that those two files are the same and dedupe them. So it would say okay, these are the same, I'll only use one.
[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.