This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Webpack Development Server" Lesson
[00:00:00]
>> Brian: So here, inside of our webpack.config, what we're gonna do is really anywhere. As long as the top level config here, I'm just gonna put it here before resolve. I'm gonna say, devServer.
>> Brian: And I'm gonna say publicPath. That doesn't need to be in quotes, colon, /public/. So, basically what your identifying to your devServer is like hey, when someone asks for the, like the CSS file and all that stuff.
[00:00:46] That's all located in public. This is kinda setting up your static file serving, if that makes sense. You're just identifying to webpack what's the static directory.
>> Brian: Okay, so that's all we did is we just added this. And now, go to package.json. You could globally install webpack dev server, but it's already in your node module so let's just make that work as is.
[00:01:20] So all we need to do is say dev. Oops
>> Brian: Dev:webpack-dev-server.
>> Brian: Okay.
>> Brian: So it just added this line right here.
>> Brian: Now, go back to your iTerm. Close your watch statement and say npm run dev.
>> Brian: You gotta wait for it, it's gonna give you a bunch of output.
[00:02:02] And everything that it built which is mostly coming from React as you can see. And it says, bundle in now valid, so everything is working well. You can also see up here at the top it says, it's gonna be at 8080.
>> Brian: Cool, everything should be good. So now, if I go to localhost:8080.
[00:02:38]
>> Brian: Now, I should actually get that.
>> Brian: Now, the nice thing about the dev server is the watch statement is also rolled into this. So it's automatically going to rebuild things for you on the fly as well. So you don't have to be running this separately from your watch statement, it does both of them.
[00:02:59]
>> Brian: There's another fun thing that the dev server can do. Like one of the things that was mentioned is, it can do hot module reload, which is a really interesting idea. It's basically saying, first of all, many of us are familiar with CSS live reload where whenever you update your CSS, it injects it into the running page, instead of having to refresh.
[00:03:23] This takes this one step further, and actually does it with code. And says, okay, at this disconnect point, all of this code is now invalid. Rebuild this code, pull it down, and plug it back in. So you have this code being live reloaded on the fly, or hot reloaded.
[00:03:38] And you don't have to refresh the page. This ends up being super useful for things like if you're debugging a particular like, menu and if you click like five menus deep to get to it. It's really annoying to have to do that every single time after you refresh the page, or for our friend that would have a hard time hitting command R.
[00:03:54] That shit's hard, I know. But yeah, so we're not gonna do that today. But that is available, but they're kinda rewriting it right now and I didn't wanna talk about it.