This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Bundling with Webpack" Lesson
[00:00:00]
>> Brian Holt: So go over to ClientApp.js. We're gonna get rid of all this stuff up here. So get rid of all the MyTitle stuff cuz we're gonna import that. And then get rid of the h1 cuz you don't need that either. And what we're gonna do up here is we're gonna say import React from 'react', import ReactDOM from 'react-dom'.
[00:00:28] And import MyTitle from ./MyTitle.
>> Speaker 2: Brian.
>> Brian Holt: Yeah.
>> Speaker 2: We have a question about if you could explain the difference between react and, excuse me, require and import.
>> Brian Holt: I mean, there are a bunch of fine differences between the two. Particularly one is EF6 is static and CommonJS is dynamic.
[00:00:56] And all that means basically is with static imports, you get the ability to do what's called static analysis which leads to live code inclusion AKA tree shaking. Which basically means you can have your code be analyzed and have it rip out all of the unneeded parts which actually Webpack will do for you for free.
[00:01:18] Well, a combination of Webpack and Uglify together will do that for you. Whereas require it's all determined. You can't statically analyze that which ends up meaning that if you include something you have to include everything because you don't know if it's gonna be included later or not. There's a bunch of other fine difference but suffice to say, they more or less end up being very similar.
[00:01:40]
>> Speaker 2: People are getting syntax errors with the import.
>> Brian Holt: Yeah, I haven't gotten there yet.
>> Speaker 2: Okay.
>> Brian Holt: Yeah. Give me a sec. [LAUGH] Save that. You're gonna import my title from my title. And so now we have React being included. React dom being included which is being used down here.
[00:02:03] And we have MyTitle, which is being included from the other file, okay? Good so far? Cool, so now what we need to do,
>> Brian Holt: Is we're going to go run webpack.
>> Brian Holt: Yep so go to your terminal.
>> Brian Holt: And you're gonna say webpack, so first of all you're gonna need to npm and globally install.
[00:02:37] Npm install --global, and I gotta go make sure I get the right version, because it is important which version you get. So do, webpack@v2.1.0-beta.25. I know [LAUGH] I know.
>> Brian Holt: But this is the version that we're gonna use today.
>> Speaker 3: Why don't we use yarn to install this stuff?
[00:03:12]
>> Brian Holt: You can I just had problems with it, with their global installs. But you can, I mean, suffice to say that it's interchangeable.
>> Brian Holt: They both pull from the same registry, so.
>> Brian Holt: Path of least resistance, I think.
>> Speaker 4: So we're just importing one component into another component file and In a real environment and we just have like one index file that's pulling in all of our components.
[00:03:43]
>> Brian Holt: I'd say in a real environment you're gonna have one component that pulls in multiple other components and inside of those components, it's gonna pull in multiple other components, right? So, it's just components made out of components made out of components, right? So, you're probably going to eventually have one router file, right?
[00:04:00] That pulls in all the big components. But those won't necessarily pull in the smaller components. Those other route components will pull in their smaller components which will then pull in their smaller components.
>> Speaker 2: Question for Jonathan. Can we remove the react and react dom scripts from index .HTML.
[00:04:17]
>> Brian Holt: Yeah, we're getting there. [LAUGH] Okay, so let's see. We're gonna say web pack, once you've done that, and then you have to give it an entry file, which is going to be js/Client, App.js. So this is basically saying, hey webpack, this is your front door, right? And a big key about your front door, quote unquote, is it doesn't export anything, right?
[00:04:46] It's the first file that webpack's gonna see. And then you're gonna tell it, okay I want you to bundle this file, and then give me one output file. So you have to give it a place to put your output. So you're gonna say public bundle.js,
>> Brian Holt: Bundle is just the name that people usually call it.
[00:05:08] I would suggest sticking with that. You don't have to, but I would just suggest sticking with that.
>> Brian Holt: Okay, so if you run that, you should get something that looks somewhat like that. That basically says hey, I included my title. I included ClientApp.js and I included a whole lot more crap that you don't really have to care about.
[00:05:27] But that's all the stuff that React was pulling in for the most part.
>> Brian Holt: So you ended up with this 274 kilobyte file. Which probably seems like insanity to you. That's because it's fairly insane. But the reason is that we're getting the unminified, ungzipped development build of React, right?
[00:05:50] So it has a whole bunch of debugging code included. When you built it for production it'll be much smaller. In fact, we can just build it for production right now. If you put -p, well, not only that. You have to say NODE_ENV=production webpack -p. And that'll build it for production.
[00:06:17]
>> Brian Holt: You don't have to do that if you don't want to. But I just wanted to show you that there is a large difference, right now it's 148 kilobytes. It's much smaller. That still NG unzipped. So it'll get even smaller, right. So just don't worry too much about it now.
[00:06:32] That's all I wanted to say.
>> Brian Holt: And you also want the debugged version right now. Because it React gives much better error messages when it's in de bug mode. Any questions about the build so far?
>> Brian Holt: Okay.
>> Brian Holt: So go to index.html.
>> Brian Holt: Get rid of these three scripts right here.
[00:07:05]
>> Brian Holt: Say script source equals public/bundle.js. Now we don't have to include anything else, we don't have to keep going and adding files or anything dumb like that. We only have to include one bundle file ever and this is, and now we're done editing this for a long time.
[00:07:29]
>> Brian Holt: So if you save that. Come back to your browser and you refresh, everything still works but we're only including one file.
>> Brian Holt: Any questions about that? Yeah?
>> Speaker 2: Enri is asking can components be pulled at runtime by injecting the JavaScript, something like plugins pulled in at runtime.
[00:07:54]
>> Brian Holt: I think the answer to that question is yes, using code splitting. You can basically tell a web pack, and this is something we do tomorrow, but you can basically tell web pack here's a bundle of code I don't need right away and I'm gonna inject this layer dynamically.
[00:08:11] And I will show you how to do that at the end of tomorrow