This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Exercise: Adding Commons Chunking Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kent C Dodds: This is not crazy important. It's just good to know. If I were to try and run the tests now, gonna have a bit of a problem.
>> Kent C Dodds: And that is webpackJsonp is not defined, that's because pretty much just the way that karma is loading our stuff into the browser.
[00:00:29] It's not loading the code that's necessary for this commons chunking to work. So, for example, actually, if I just remove that. The vendor file, and try to load. Where did my stuff go? Right here. Gets disorganized. Try to load this. I'm going to get the same error, Jsonp is not defined, and that's because it's the vendor chunk that holds the Webpack runtime now.
[00:00:57] So, no longer is the Webpack runtime living in app. So basically, like I said before, when you say comments chunk, I want to put all the common stuff in the vendor file. One of the common things is the Webpack runtime. So, it puts all the Webpack runtime in the vendor file.
[00:01:16] And so, without loading the vendor file, then I'm gonna have a problem, and in our test, we're not loading the vendor file. But if you stop and ask yourself do I really need to have comments tracking in my test? The answer is absolutely no. And so, you can, this is one of the reasons why I created this Webpack plugin, or common config details.
[00:01:36] Cuz now you can just say if prod, then we're gonna have this. So, it will only be defined and prod. One other problem that we run into though is if you have one item in the plugins array that's undefined, then Webpack is going to cry like a baby, and so, there is another util here called remove empty that you can use.
[00:02:02] You just wrap your plugins array and remove empty, and it will remove any empty plugins that you have in that array, so that way, you can use these utilities, like if prod and such. And then the test should hopefully work.
>> Kent C Dodds: Cuz now it's no longer chunking it in the test environment, just for broad, boom.
[00:02:32]
>> Kent C Dodds: Everyone having fun?
>> Kent C Dodds: I'm thinking maybe a little bit, in a little bit we'll maybe do some air squats, but I don't know.
>> Speaker 2: What do you mean by empty plugins?
>> Kent C Dodds: Empty plugins, good question. So, when I use ifProd, this function will take two arguments. One of them is, well, here, let me actually rewrite this.
[00:03:00] Using or not using the configure tells. And so, let's env.prod, if it is, then let's just stick this right in here, otherwise undefined. That's essentially what it's doing. So, by, and I don't know about you, but this is why I like having the utils, cuz I think this doesn't look as nice.
[00:03:27] But yes, so, when it when env.prod is false, then you're gonna wind up with undefined, and Webpack will cry. And so, you need to remove empty before you send it to plugins. And if you want to, you can run, just to see what the end result of everything is, you could run npm run build:dev, and then pass along env.debug, cuz we added that earlier.
[00:03:54] And you'll see the output and the plugins, you'll see the progress plugin But you won't see the CommonsChunkPlugin, because I was doing the dev mode. Alternatively, here, let me get rid of this stuff. Alternatively, if I did, oops.
>> Kent C Dodds: Prod, or just regular build, then you're gonna see the CommonsChunkPlugin.
[00:04:22] Right there.
>> Kent C Dodds: Fun stuff, any other questions about what's going on here? Okay, well, a lot of questions, sorry
>> Speaker 2: Those first two, you covered those, so it's just that last one.
>> Kent C Dodds: Okay, so how do you, I'm not sure I understand, Martin. Let's see.
>> Kent C Dodds: Yeah, so generally, you would probably want to put d3 and react in here, and by generally, I mean yes, you would do that.
[00:04:58] I'm not sure why I didn't do that for this x, or for this portion, but yeah, you would. You could do that and try it out and it should work, yeah.
>> Speaker 2: Wouldn't you have lost, cuz like the d3 in the reactor is only used for the pie chart thing?
[00:05:13]
>> Kent C Dodds: Yeah, so you could potentially lose some of that I'm not sure how it was, how it would respond to that, maybe you would make a special chunk for that or something. It's pretty magical. So yeah, you could give it a shot and look at it, but I'm pretty sure it should work as you would expect, I would expect it would, maybe not, no.
[00:05:36] Something to look at, good question. Other questions?
>> Speaker 3: So yeah, so in the vendor, you just list all the imports that you want to have quick into the vendor. And okay, so that's explicit, everything that's not in there goes into the app?
>> Kent C Dodds: Yeah.
>> Speaker 3: Because that's-
>> Kent C Dodds: Yep, and you can have all kinds of entries in here, and there are actually several ways to accomplish commons chunking with the CommonsChunkPlugin.
[00:06:02] It's got kind of a big API that you can go look in the doc set later. But yeah, this is probably the simplest, even though it's not very simple. And how do you test if karma doesn't load vendor JS as reactors in there? So, yeah, good question, as far as testing is concerned.
[00:06:24] So, if you remember, this app module still actually does have, well, actually, this is totally irrelevant. Entry doesn't matter at all in the testing. In karma config, what matters is what you specify as your files. And so, it's going to take each individual file and resolve all of its dependencies totally outside of the idea of entry, or what we're putting in vendor.
[00:06:55] Because we added this if prod stuff, it's also not going to care about their common strength again either. It just resolves everything for us, and in testing that, that's just fine. And we trust our tools to be able to do everything else for us, and then we have end to end test of make sure that the tools work too, so.
[00:07:16]
>> Kent C Dodds: Cool, so, any other questions, okay.
>> Speaker 2: Did you answer that one about testing of Carmen, Carmen doesn't load the banner JS.
>> Kent C Dodds: Yeah, just answered that one.
>> Speaker 2: And then what about Billy's one right above there, that one popped in?
>> Kent C Dodds: Okay, Billy is asking the CommonsChunk, and chunks are evaluated by Webpack.
[00:07:36] How do I determine that one module is common? So, you would explicitly decide that yourself and put that in vendor. There are ways to specify, hey, Webpack, I don't know what things are common. But just, and this would apply in a situation where you have multiple apps that you're bundling for.
[00:08:03] But you'd say hey, take all of these apps. Whatever's coming between them, make it come and chunks for those. And yeah, so that's totally possible. That's actually what we're doing at PayPal, where we have multiple apps. In this app, we're mostly just doing this to get our vendor away from our app, our app code.
[00:08:23] So, again, this is kind of a feature that has a couple different faces. It depends on your needs for the app.