Complete Introduction to React (feat. Redux and React Router) Webpack Watch

Transcript from the "Webpack Watch" Lesson

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

[00:00:03]
>> Brian: Someone must have mentioned that Webpack sucks to run right now. So let's make it suck slightly less. [LAUGH] So everyone go to, well we can actually do it direct in the command line real quick. So we're here in our repo. We're gonna run webpack --watch. And remember, this is going to pull in our Webpack config, that's why it knows what it's supposed to do.

[00:00:27] [COUGH] That first run is going to be just as slow as it always is. But now if I go change something, I'm gonna change this to say, Browse All!?!?!?!?!?, just adding something to change it. And now, if I save, notice that rebuilt really fast, right? This took six seconds.

[00:00:45] This took 141 milliseconds. And the reason why is Webpack is smart enough to say, all this stuff that I built, only this tiny chunk changed, so I'm only gonna rebuild this part. And then, reintegrate it back into the things I already built right? So for the most part, react is the big part and all the babel polyfills that's the big part.

[00:01:05] And just our app right now is tiny. So it's actually gonna be really fast every time we do watch now. So now if we refresh, notice that it's all there. And the nice part is now every time I change something, I don't have to go back and say run build every single time, it just automatically will change on the fly.

[00:01:21] The reason why this ends up being not so nice, is when you have an error, it's nice to have Webpack yell at you right in your face. And sometimes what'll happen is, I'll change something and say this, right, I'll click save, this is broken, right? And if I was going over to my console, you'll notice right in the front, it says, my god, you broke everything, you're so stupid, right?

[00:01:44] But actually Webpack will give you pretty nice, actually this is not very nice. [LAUGH] It'll try to give you a nice error of, hey I broke here, right? And now if I go over here, you wouldn't see the change propagated because it won't rebuild unless it can actually fully rebuild what you're looking at.

[00:02:11] So that's why it's important to make sure you're checking your console every so often. So now we wanna actually, go ahead.
>> Speaker 2: There was a question about is there a way to get auto completing on your tags in sublime?
>> Brian: Auto complete in the sense of like?
>> Speaker 2: If you open a div.

[00:02:35]
>> Brian: So like if <div>, in sublime I'm hitting alt, option. Alt or Option Command period will close whatever tag you are on. And it's actually smart enough to say, it knows I'm on an H1 right now. So it'll close H1 first then the div. And if I try to do it now, nothing's open so I'm nothing's open so it won't close that.

[00:03:01] I mean that's just an HTML trick and I think most editors have some version of that.
>> Speaker 3: That's the same in ATOM.
>> Brian: Yeah, I think they took out a lot of the sublime bindings. So now if you want to get extra advance, I always hesitate because people ask me how I did this and it took me so long to configure it correctly, and I don't remember how I did it.

[00:03:25] But just anyone here use Emmet for H.T.M.L. it's amazing so you just say div.myclass right and then you can a tab and just auto complete into a [INAUDIBLE].
>> Speaker 4: Actually just sent a link into chat with instructions on how to enable that JSX.
>> Brian: Wait hold on is that my question?

[00:03:48]
>> Brian: Look who asked the question this guy, hoo. [LAUGH] That's the only question I've ever asked on Stack Overflow. [LAUGH] That's really funny.
>> Speaker 4: I didn't even see that part.
>> Brian: Yeah, so you can do it. It's a pain in the butt to configure, so that's why I always hesitate to show people that.

[00:04:10] But it is pretty cool, you can say If you just do period my-class it infers that you meant to div, right? Or you can do my-class my-id, right? It will actually do class name, ID. It's pretty neat. I'd recommend it. I think it's a emmet.io if you want to check it out.

[00:04:30] It's built for every editor out there. So put that on the to do list. I didn't want to spend too much time on it because it's a pain to set up for JSX. It works out of the box for html, it's just for JSX in particular it's a pain.

[00:04:48]
>> Brian: Okay. Any questions about that?
>> Brian: Cool, again, I'm gonna generally avoid using Emmet, just cuz I want people to actually see what I'm typing out. But you're welcome to use it if you can get it to work correctly. All right, so we're gonna put into our package.json the watch so we don't have to remember what the command is.

[00:05:15] And we can just do as you might imagine webpack -- watch. Pretty simple.
>> Brian: That makes me so happy that you found my question on stack overflow.
>> Speaker 4: It was the first or second result.
>> Speaker 2: That's 7,500 views.
>> Brian: Yeah because I was definitely not the first person to question.

[00:05:45]
>> Brian: Yeah, how funny. Okay. So now instead of doing npm run, sorry. Instead of doing webpack --watch, we can just do npm run watch.
>> Brian: It'll run webpack for us. For those of you that are not super familiar with command-line this is gonna run indefinitely in you console until you hit Control C.

[00:06:17] And that's how you stop it from running in case anyone was unaware of that feature of the console.
>> Speaker 2: Somebody is asking if there is a syntax for comments and J.S. X.
>> Brian: There is so as you might have noticed. Let's come back here and close that. This isn't gonna work and this doesn't work either.

[00:06:48]
>> Brian: That's kind of a pain, so the way you do it Is you do this, with the curly braces,which is the expression we talked about and then you can do this.
>> Brian: And that's the way you do it currently. As far as I know, there's not another good way to do it.

[00:07:09]
>> Brian: It's annoying but it is what it is. Other questions? Okay.
>> Speaker 2: Sorry, one is just coming in, do you recommend setting up JS source maps early in the process for easier debugging?
>> Brian: I mean the answer is, we're not going to have sources maps at all today and the reason being for that is it's just another thing to set up.

[00:07:43] [LAUGH] It's just more tooling that we don't necessarily need right now. What source maps are gonna tell you is that instead of telling you had an error here in bundle .gs, It's gonna be line 50000 of bundle .JS. It's gonna say you have an error on line ten of, my title.JSX.

[00:08:00] And that's a nice feature you can also do a feel like your sass and anything like that now that browsers speak source map and you're welcome to do that we're just not gonna do today.
>> Brian: Okay, any other questions about before we move on or Webpack watch, okay.

[00:08:24]
>> Speaker 2: Will comments in some curly braces get rendered to the browsers?
>> Brian: No and there's not as far as I know. It's not a good way to do to operate browser comments right now with JSX. Not that I'm aware of anyway. But you can Google that I'm sure someone else had that problem if they really needed one and figured it out.