This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Configuring Webpack" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: So eventually we're gonna be doing some pretty fun slash crazy stuff with webpack and trying to put that on the command line, that one line is gonna get really crazy. And it's actually better for us to abstract that out into just a config file, so we're gonna do that real quick.
[00:00:22] So come back over to your project, create a new file and call it webpack, gotta remember it, webpack.config.js. It actually is significant, what you call it because webpack looks specifically for that file, okay? And make sure it goes in the root directory of your project, not in the js directory.
[00:00:48]
>> Brian Holt: Okay, so now we have this webpack.config.js in our root directory. And we just gotta put a couple things in here.
>> Brian Holt: So we're gonna pull in path. That's a node module,
>> Brian Holt: That allows us to do some path resolution that just makes creating relative paths and absolute paths a little bit easier,
[00:01:15]
>> Brian Holt: And then we're going to say module.exports.
>> Sneezing Student: [SOUND]
>> Brian Holt: Bless you, and we're gonna export an object and this object is going to be fed into webpack and then webpack is gonna use all of these for us. Okay, so context and then you're gonna do underscore, underscore, two underscores dirname.
[00:01:39] Again, this is something that web, or sorry not webpack, but node exposes to us that basically lets you know where you're running this from. So now I can run this from anywhere inside of my project and it's gonna work. That's why that context is important, okay? And then we're going to do entry.
[00:02:00]
>> Brian Holt: My notes are incorrect here, so entry. [COUGH] If you remember if you look over a package.json real quick it's this piece right here is letting it us know where we're going to enter our webpack. It lets us know what the the main file for our project is, that's what I'm getting at.
[00:02:19] So here we're gonna say ./js/ClientApp.js. We're actually gonna rename that here in a second, but for right now it's sufficient to say that. Okay, now we're gonna say output and this is gonna say that second part of where we gonna put the bundle when we're done. path: path.join{__dirname} and then we're gong to say /public.
[00:02:57] So again this is just making sure that this is always going to go to the correct public directory and path is just doing, it's a nice little helper method to make sure that that path bundles up nicely. Okay, and then filename, all lowercase, bundle.js. Hopefully self-explanatory, that it's, that's the name of the file when it's done.
[00:03:26] Okay, then we're going to do resolve. That's another object.
>> Brian Holt: Remember when we said, dot slash my title, and we omitted the .js? Basically you need to tell webpack, if you want to use that, you don't have to use that, you can always refer to the extension as well, but I'm hashtag lazy, so I don't like to.
[00:03:52] So you can basically tell it here's the order of file extensions that I want you to look for. So if it's not .js look for .jsx. If it's not .jsx look for .jsn. So we're gonna say extensions.
>> Brian Holt: We're gonna say blank. So first thing we want you to look for is if it's I'm looking for ./my-title look for something literally called my title with no extension.
[00:04:18] After that look for .js. After that, look for .jsx. And after that look for .json, that makes sense? So it kinda goes through this progression of okay I didn't find this, I'm gonna look for this, I'm gonna look for this and I'm gonna go look for this.
>> Brian Holt: So this can end some ambiguity if you have multiple files called the same thing such as just don't do that.
[00:04:50] Question from online?
>> Speaker 3: I think I got it.
>> Brian Holt: Okay.
>> Brian Holt: Any questions about extensions or resolve. Okay. Stats. We wanted to kind of see what's going on with our webpack config. We wanted to output nice things so we can kind of get a grasp what's going on.
[00:05:15] So colors true. That's always helpful so you can kind of distinguish pieces that really quickly. And colors is basically like if we go back over here real quick, notice that this is in green, this is in green. We want it to display in colors so it's easier to parse very quickly.
[00:05:34] Reasons true and what this is going to do is it's going to give us verbose error messages. So when crap blows up you want to know why. That's the gist here and then chunks. We're gonna talk about chunks at, it's the very last part of this workshop but right now we don't want it to display any chunk of messaging because it's noisy and we're not doing any chunking right now.
[00:05:56] So just do chunks false.
>> Brian Holt: Okay, last part here is we're gonna do module. These are all the external modules that you want webpack to pull in. I'm gonna say loaders and loaders is an array.
>> Brian Holt: And this is basically the array of different extra build steps that you want it to plug into the middle.
[00:06:28] The nice thing about loaders is you can you can have a bunch of them, and you basically supply, it's do this then do this then do this then do that. So you're just giving it an order, you're building your build pipeline right here. Okay. So right now we're gonna only have one loader that we care about which is going to the babel one.
[00:06:46] So the first thing you're gonna do is test. And what test is, is it's gonna say, if a filename passes this regular expression, then run it through this loader, right? So for example, we don't want babel running on CSS for example, right? That would be really silly because that doesn't make any sense.
[00:07:05] But we want it running on anything that's js or jsx. Okay? So if you're not familiar with regular expression in JavaScript, they're between slashes. Okay? And then you're gonna do backslash. Sorry. We'll start over. We're going to do / then we're gonna do \.jsx?$/. So one, this is definitely not a workshop on regular expressions.
[00:07:44] One, because I'm not super good at these. I used to have to write them for my very first web development job, and they were just a mess. But the basic gist of it here is the dollar sign mean it's always going to come at the end, right? Cuz file extensions are always at the end.
[00:08:01] The backslash here is escaping because we wanna literally look for a period. Otherwise period has meaning within regular expression. Then we always want to look for js, right? Because whether it's js or jsx, we wanna be looking for those kind of files. And then the x question mark basically means the x can or cannot be here.
[00:08:21] So if it's .js works, if it's .jsx it works. So it's optionally there. Is that a sufficient explanation of regular expressions cuz that's about how you're going to get out of me. [LAUGH]
>> Speaker 4: I have one really awesome resource too, which is regxr.com.
>> Brian Holt: Okay.
>> Speaker 4: It's just regxr.com and it shows highlighting around different groupings.
[00:08:47] And it'll tell you, if you highlight over A-Z for instance, it'll give you tips on what that means.
>> Brian Holt: Cool, so you can probably just grab this out of here right now.
>> Brian Holt: And now you can take a look at what that actually means. Cool, thanks man. Okay, my consistent motto in life is that if you're using regular expressions, you probably are doing it wrong.
[00:09:19] [LAUGH] There's usually a better way to do it.
>> Brian Holt: Okay, so now we're gonna do loader, babel-loader. And this is basically saying anything that this returns true on, run it through Babel loader.
>> Brian Holt: That's it, that's all for our webpack config.
>> Brian Holt: [COUGH] Webpack works nicely out of the box to just compile modules, but as soon as you start trying to do much more than that, it's a lot of set up to get it to work correctly.
[00:09:58] And it's a lot of fidgeting to get things correct. Which is why a lot of people complain that webpack is too complicated. It is, this is a little silly for our little toy project that we wanna bundle and run it through Babel. I think it could be a little easier, but then again, we did have it running just with our package.json too.
[00:10:19] So take that for what you will. So what's beautiful about this now is I can actually go remove all this crap in my build. So now it just runs webpack. Because it's gonna grab all that configuration out of my webpack config.js. So if I save that in my package.json.
[00:10:43] Make sure you've also saved your webpack config.js and come back over to your terminal. If I just run webpack now, just bare bones, it's gonna actually find that config and it's going to run it correctly. Which I think is pretty nice. But you can also do npm run build.
[00:11:02] And that works as well.
>> Brian Holt: Yeah.
>> Speaker 5: Mine has an exciting error, cannot resolve module babel-loader, do you have any idea why?
>> Brian Holt: So maybe.
>> Speaker 5: Or I guess it says error in entry module not found.
>> Brian Holt: Okay, well the Babel loader one, just do npm install babel-loader and that should hopefully resolve that.
[00:11:41] Entry module not found probably means that you pointed at the wrong file, so the entry here is.
>> Speaker 6: If you do npm install in the directory, it should install.
>> Brian Holt: It should have gotten babel loader, right?
>> Speaker 6: Yeah, so they got babel loaders. So you shouldn't need to install.
[00:11:57]
>> Speaker 5: Yeah, I'm not sure. Okay.
>> Brian Holt: Okay, so for the entry part, my guess is that this line is not correct. If you're following my notes, my notes are incorrect here, by the way.
>> Brian Holt: Anyone else? So who is getting it?
>> Brian Holt: Okay.
>> Speaker 7: I'm actually getting a weird error with node_modules/webpack-core/lib/LoadersList.js r.forEach function(r), and the TypeError is r.forEach is not a function, right?
[00:12:38]
>> Brian Holt: [CROSSTALK] Yeah, I have no idea.
>> All: [LAUGH]
>> Brian Holt: Okay, so
>> Speaker 9: Yeah, too many changes.
>> Speaker 7: I think you should just push up a branch.
>> Brian Holt: I wholeheartedly agree.
>> Sneezing Student: Okay.
>> Brian Holt: So fem-5 is up now. And if you're not getting the correct thing right now, I would say don't worry too much about it because we went through line by line of what this config does.
[00:13:23] So, hopefully you understand the concepts here. We could debug it but anyway, debugging webpack's not very fun especially errors like that, holy crap, because I don't want to dig in the internals of webpack.