This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Creating a webpack.config.js File" Lesson
[00:00:00]
>> Brian: All right. So, now, we have Babel set up to run, or we have configure, now we have to include it to learn. So, what we're gonna do is go back to you command line and say, webpack -- module- bind = 'js=babel'. Then the same thing we had before js/ClientApp.js and public/bundle.js.
[00:00:39] To dissect this the module buying the part that we add is just saying,hey, anytime you come across a .js file. Just go ahead and run that through Babel.
>> Brian: And Babel specifically is running what's called the Babel Loader. And I kind of alluded to this earlier, but what I'm getting at is there's a concept of what's called a loader in Webpack.
[00:01:06] And that's just saying, it's kind of a plug-in to say. Like, hey, here's a middle transform I want you to run this through. It's just kind of like an additional functionality. So, that's how you get that in there. They're called loaders. Okay, so, now, we should be able to run this.
[00:01:21] It's going to take much longer than it did before. Because now everything is getting transformed. And that is not a slow process.
>> Brian: Okay?
>> Brian: So, now, everything is being run through Babel. And now, we can start using ES6. We can start using JSX. All these things are available to us.
[00:01:49] Now, you could just go ahead and drop this Webpack command into your MPM scripts. But what's actually and better for us to do. Because we're going to start adding more, and more options to this Webpack build. We're just going to make a config file. And that's a million times easier to maintain.
[00:02:05]
>> [COUGH]
>> Brian: Bless you.
>> Brian: So, go create a new file called webpack.config.js, we're gonna put that in the root directory of your particular project, and save that.
>> Brian: And what we're gonna do here is we're going to make our config. So, const path equals required path. Path is just a, it's a node module that kind of helps you resolve paths, so you don't have to do it by hand, it's just a really useful thing that comes with node.
[00:02:51] If you have any more questions about it, you can just check out the node docs on it. Okay, and then we're gonna say, a module.exports equals an object. So, the reason why we're not doing, we're doing common JS here, and not import export ES6 modules, is this is only going to be run in node.
[00:03:12] And we could technically run this through Babble, but it's like, five more steps to avoid writing import and, or avoid writing require, and module that export. So, I just side step it, and I just write it in the default note way.
>> Brian: Okay, so, module.exports equals this object, I'm gonna say, context:__dorname.
[00:03:38] This is just letting Webpack know, whenever I run this command from anywhere inside of this project, go back to the root directory. Cuz this __dirname, it's a node thing, it's just basically saying this is where the project is from. Entry. You have to tell it where to enter your project, and it's gonna be in ./js /ClientApp.js, right?
[00:04:03] That's the entry point to our app.
>> Brian: Devtool. There's several different kind of devtools you can put in here. This is a debugging tool to help you Instead of seeing line 50,000 of bundled up JS we want, right? We want to see that this is actually a problem in my titled JS on line ten.
[00:04:26] So, source maps, right? So, if you want to put full source maps here you can say, source-map. That's fine too. That takes a little bit longer to build. I'm very impatient. So, I put eval here, which is a faster dirtier way of doing it. So, up to you whatever you wanna do.
[00:04:49] Output. You have to tell it where to put to your output. So, the path of where we want it to put is path.join. __dirname, /public.
>> Brian: This makes sense, right? This is where you want the bundle dot JS to go, and you call is bundle.js
>> Brian: But you could put whatever here if you wanted to.
[00:05:27]
>> Brian: Resolve.
>> Brian: Extensions.
>> Brian: And do .js and .json.
>> Brian: So, if I say require this file with no extension, this is the progression of file names it's going to go through before it gives up. So, if I say, just for example, import Blah from ./ Blah with no extension.
[00:06:06] It's first going to check if there's literally a file called .Blah with no extension. Then it's going to check is there a .js, you know, blah.js, no, okay. Is there a blah.json, yes, then it includes that, right? So, this is the progression that it's gonna go through before it gives up.
[00:06:23] So, if I have three files .blah, .js, .blah.json. One, name your files better. But two its gonna include the one with no file extension.
>> Travis: I have a question.
>> Brian: Yeah.
>> Travis: I'm Travis. Do you recommend dev tools for production build?
>> Brian: No, no, you should not ship those, because they're way bigger than they need to be.
[00:06:47] They usually end up being way bigger than the files, right? So, yeah, definitely don't do that in production. Good question.
>> Brian: Stats, this is just what kind of stuff do you want webpack to report on. Colors, hell, yeah, [LAUGH], cuz I like colors, reasons. This is gonna tell you if stuff fails why it failed.
[00:07:12] Very useful to know, chunks. We're gonna be doing chunking tomorrow, but you want it to report on all the different chunk data as well. Okay, and then lastly, module. This is actually one of the most important things. This is basically all of the transforms that you want Webpack to apply, and it's done by a series of rules.
[00:07:41] And I think, that kinda make sense, right? I says like, okay, if it passes this rule then apply this transformation, that's the process here.
>> Brian: Okay, so, and it's just a series of objects, and we're just gonna include one right now. So, the first thing is you need to give it some sort of test, or some way for it to tell if a file is going to be included, or not.
[00:08:01] This can be a function. If you need to be that granular about, which files are included and, which are not. I'm just gonna say, test, and then you can give it a regX. I'm no means a regX master, but I can write that. Which basically says, if it ends in js then run it through whatever this is.
[00:08:24]
>> Speaker 3: Dinarte is asking do you recommend the new Webpack in new projects?
>> Brian: I think, it's safe to include even with the beta version. I mean, the guy that writes the project. Well, of many, the Larkin on Twitter, I can't remember what his name is either. He said it's not changing.
[00:08:48] They're just trying to finish up the doc. So, I think Webpack 2 is ready to go.
>> Brian: But you know what? Tweet at him, ask him. [LAUGH] He knows better than I do.
>> [LAUGH]
>> Brian: Okay, so. If it passes the test, then I want you to run it through this particular loader, which is babel-loader.
[00:09:10] That makes sense, right? If it passes this test, then run it through babel loader. Which is an npn module that we installed, right?, we installed babel loader when we said yarn. Do you have a question?
>> Travis: Is Webpack meant to replace grunt and gulp, or does it serve different purpose?
[00:09:31]
>> Brian: It does serve a slightly different purpose. So, grunt and gulp are what you would call a task runner, and basically you set up all these different tasks, and you just say grunt run built, right? And then grunt's gonna pull in browser fi, it's gonna pull in web pack and run it through the build, right?
[00:09:48] So, Webpack, browser five, roll up, these are bill tools that are actually going to, or I guess, transpilot no. What do you want, I guess I will call it a bill tool or module bundler. Bundler, that's actually what I want to call it. That make sense?
>> [LAUGH] [INAUDIBLE]
[00:10:08]
>> Speaker 3: So, what would be comparable to Grunt, or Gold Pier would be the MPM scripts part. Where we set up those tasks in MPM scripts that get run, that's what would be more analogous to what Gulp and Grunt fulfill.
>> Brian: Okay, so, let's go run this, and then once I make sure it works, then I'll push up the new branch.
[00:10:33] So, before I had to do Webpack blah, blah, blah, blah. But now, I have this config file, which will find it automatically. So, I can just run Webpack and it should just work.
>> Brian: Cool, so, now, we get this bundle file. We can go check again to make sure that it still works.
[00:10:53] Everything still works, so let me just go ahead and push up this git add. Git checkout -b v2-3. Git commit -m "3" git push.
>> Brian: I think, I have 68.
>> Brian: Okay, so, now, v2-3 is available for those of you that wanted to get that new build config.
[00:11:41] Any questions? Webpack is a complicated beast, and it's usually like, again, a pretty big point of annoyance for developers approaching react, or anything in modern JavaScript. It is complicated, right? So, like if you feel like it's complicated, you are correct in your assertion. But it is a really cool tool.
[00:12:06] With a bit of prodding, and massaging you can do really cool stuff for your codes so. My God-
>> Travis: I'm a fan.