Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Webpack" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Brian would like to split his React components into separate JavaScript files. This allows for a better separation of concerns. Brian will be using Webpack to bundle all the necessary files and their dependencies.

Get Unlimited Access Now

Transcript from the "Webpack" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: We're gonna talk about a little bit more about tooling because tooling's fun. Let's talk about webpack. So there's a bunch of different packages out there. I think many of you've probably at least touched Browserify or Webpack or Require or something that's gonna use AMD, they're common or yeah, six imports or whatever.

[00:00:25] We're gonna be using Webpack. One, that seems to be the most popular at this very moment in time in the react community. And two, we're actually gonna be taking advantage of some of the more advanced features tomorrow of Webpack. But what is Webpack? Webpack is just a build tool, right.

[00:00:42] So if we look at our ClientaApp.js, we have a bunch of stuff in the same file, right. This actually could be very easily split up into a couple of files. Most notably we could split out my title, so it's just like, my title, is just in its own file.

[00:00:58] In fact we're literally about to do that. [LAUGH] And then, what we can do is we can require that file in and then use it in here. And I think that separation of concerns and that separation of code makes a lot of sense, right? However, JavaScript, until recently, did not have the native ability to be able to split code out into separate files.

[00:01:20] Everything was expected to be either global or in the same file. So these build tools allow us to be able to pull these files in separately without polluting the global namespace. Like right now we have React and ReactDOM being pulled in. But if you actually go into here.

[00:01:36] I actually have React available globally on my web page. And that's a problem, right, you don't wanna expose these things globally, you wanna keep them all into a tight bundle because if something later like some idiot on your team overwrites React, your entire app blows up and that's not a good thing.

[00:01:55] And it's better to just have these local scopes instead of this huge global mess. That's a fun name of a method, did you see that? Secret DOM, do not use or you will be fired.
>> All: [LAUGH]
>> Brian Holt: I did not put that there. How awesome, secret DOM server.

[00:02:16] I love that. I guess Facebook is serious about that. Okay, so don't use that. That's the second part of my workshop is just don't use that and you'll never be fired. Okay, so anyway let's talk about webpack so. Like this is manageable because we have 28 lines of code but can you imagine the entire Netflix code base in one giant file like it which is just the worst thing ever.

[00:02:45] Like your editor would crash just on opening it. Because we have hundreds of thousands of lines of code. So we wanna be able to split them out into separate files. We wanna be able to pull in our dependencies in a nice, beautiful way without having to pollute our global namespace.

[00:03:03] So enter Webpack, Webpack's gonna do this for us. You can also use Browserify. My personal favorite these days is Roll up. Again we're not gonna be talking about it but it's super cool. So something to check out in your own time. The cool thing about roll up is it does tree shaking.

[00:03:23] So for example. I mean everyone's used jQuery. But the question I always have for everyone, has anyone used all of jQuery? And unexception well maybe you would because he was on the jQuery UI team, so you don't count. Most people have not scratched the entire surface and because there's but 200 methods in jQuery's.

[00:03:44] 200 plus, maybe 300 at this point. An insane amount of methods. So what tree-shaking is gonna do for you, is it's actually going to shake out the parts you don't use, and so you are only including the parts that you are using. And it just cuts down on file sizes automatically, automagically, for you.

[00:04:01] Anyway, we're gonna be using Webpack, we're not gonna be using rollup. Cool, so let's go ahead and split my tile into its own file. So let's grab this right here and we also need to grab that up there. We're gonna create a new file. We're gonna call it MyTitle.js

[00:04:28]
>> Brian Holt: And I'm gonna put this in here.
>> Brian Holt: And then underneath here, and this is super important, you need to module.exports = MyTitle. Now to head this question off of the pass because I'm sure someone is typing it right now, is that why are you not using ES6 module [LAUGH].

[00:04:54] The answer to that question is, we're gonna be using this in React later. And not that it's impossible to use ES6 modules with Node. We're gonna be using Node later. And it's not impossible to use ES6 modules with Node, you just have to have like another layer in front of it and it's just like one more busy work step that we don't wanna do.

[00:05:15] So I'm gonna stick to common JS and wait till the node ES6 story improves before I switch to ES6 modules. Because this works as is and I'm happy with it. So that's the answer to someone's question that was coming. Okay, so save that. Go to a client app.

[00:05:38] We can get rid of the MyTitle here now.
>> Brian Holt: Okay? And you can also get rid of the h1 here, because we're not using it anywhere inside of a client app.
>> Brian Holt: Or you can wait for standard DLU, your choice. And then the other thing we're gonna do here is we're gonna say var MyTitle = require('./MyTitle.').

[00:06:15] You can put the .js on there if it makes you feel better. Webpack will infer that you mean a JS file. So either way works for you. Okay, so now we have this separated into two nice files. But now we need to be able to bundle them together, right.

[00:06:34] Because your browser doesn't speak that right. Like if we come back over here and try and run this again, it's gonna say what the hell is require? You just made that crap up. So [COUGH] let's actually make Webpack create this bundled file for us.
>> Brian Holt: So wanna make sure you have Webpack installed.

[00:06:56] It should already be, if you did the npm installs, it should already be in there. But we're gonna be running the client. So yeah, you do have to install it globally real quick. Come here. If you don't already have a public directory, you actually probably should cuz yeah, the CSS is in there so you should already have a public directory.

[00:07:18] And then what we're gonna do now is we're gonna go to, that's the other thing is we need to go to index.html. And we're no longer going to refer to client app.js, right, we're gonna be referring to the bundled JS. So what we're gonna do now instead of saying client app here, we go ahead and delete that and say,

[00:07:41]
>> Brian Holt: public/bundle.js. The very nice part about doing it this way is now that bundle is always going to have everything we need and we don't have to come back here and modify every time we add a new file. So, that's another added bonus. Cuz I'm sure many of us have seen like those projects that have like 15 dependencies underneath that, right?

[00:08:07] That's crazy annoying. Okay, so now let's go create bundle in our command line. We're gonna say Webpack and we're just gonna say js/ App. So you basically have to tell Webpack where is my file. Right, so where is my entry, and in our case ClientApp is gonna be our entry.

[00:08:38] And then we have to tell what file we want it to generate. So we want it to generate public/bundle.js, okay. We hit Enter. You should get something nice looking like that.
>> Brian Holt: And so now, if we go over here and we open in public bundle, she get this kind of crazy mess of stuff.

[00:09:07] The top stuff appears like basically make Require work and then you'll see all your code down here.
>> Brian Holt: At this point it's still readable. We're going to make it an unreadable mess here in about ten seconds, okay,
>> Brian Holt: So any other thing to take note, if we say ls public -lsa.

[00:09:36] Notice it's actually not a very big file, right.
>> Brian Holt: We're also going to change that shortly. This is quickly going to become a huge file.
>> Brian Holt: So now if you refresh the page, it should still work. And if you look at your network, you see that you are pulling in

[00:10:02]
>> Brian Holt: Bundle, right there. Bundle.js.