Initialize Webpack Vue Project 0:00Let's stick with Vue later a bit longer and review hot reloading, which I think you'll like. So we're going to set up a new project. We already installed that in the last lesson, so we will initialize a simple webpack project called lesson, and stick with the defaults. Okay, so let's cd in there, and install our dependencies, and then finally open this in Sublime. Okay, so what I want you to take a look at is the package.json file. You'll see that we have two npm scripts here. The one we care about for this lesson is dev. Understanding npm run dev 0:26You'll see that we have two npm scripts here. The one we care about for this lesson is dev. Okay, so when we trigger that with npm run dev like this, well, it's going to set the node environment to development, and then it's going to boot up webpack server. It will open a browser. It'll use the inline mode, which basically just adds the dev server entry point to your configuration file. Don't worry about it. And then finally, we want hot module replacement. Okay, so here's the really cool thing about this. Demonstrating Hot Reloading 0:50And then finally, we want hot module replacement. Okay, so here's the really cool thing about this. Let's go ahead and run it, and it opens the browser for us, just like last time. But now, take a look. If I go to source, app.view, and we make a change, as soon as I save it, and if I switch back, you'll see that reflected here. So that in and of itself is really great. But it's not just a matter of refreshing the page. It can also swap in the components on the fly without changing your data. So let's do something like this. Building a Counter Component 1:15It can also swap in the components on the fly without changing your data. So let's do something like this. Go to main.js. We import app, which is what we see here. But I'm going to get rid of all of this, and we're going to start from scratch. And we're just going to use a little counter component, just to show you that we don't lose our data. So we're going to use a counter. We'll create something like that. And then for the styling, we can get rid of that entirely.We'll create something like that. And then for the styling, we can get rid of that entirely. So let's do this. Let's import, we're going to call it counter, and I'm going to store it within components slash counter. And it is a view file, so I need to be explicit about the extension. Okay, next, I will register it as a component, like so. And let me re-indent. Okay, so now we can create that, source, components, counter, that view, and we're going to have a template here that will just be a div and something like this.Okay, so now we can create that, source, components, counter, that view, and we're going to have a template here that will just be a div and something like this. The count is colon, and then we'll set the count. But then I'm also going to have a button here, and when you click on it, I'm going to increment the count by one. All right? So very basic stuff. Next, we'll have our script, where we export default, and for the data, I'm going to return a count that is set to zero by default. Okay, and that's, I think, that's basically our counter.a count that is set to zero by default. Okay, and that's, I think, that's basically our counter. So it will have a div, a count that shows the current count, and then a button that increments the count. So we take that, and we import that into our app.view. We store it as counter, which means we can reference it, like so. Now we're still watching for changes. So if I were to switch back and give this a refresh, I can click increment here, and that looks good. But now if I make a change, for example, we go back to counter, and we'll say the count Hot Module Replacement Benefits 2:51that looks good. But now if I make a change, for example, we go back to counter, and we'll say the count and get rid of is, if I save it, you'll see that reflected here, but notice that the number, the increment, did not reset. This is hot module replacement in effect. So you can make changes and on the fly swap them into the browser without having to refresh the page and reproduce all the interactions. Let's see it side by side. Let's say count, save. It updates on the fly.Let's say count, save. It updates on the fly. But next we're going to increment by 20 at a time. It updates. So when I click on this, it'll go to 29, 49. Or bring it back to one, and now it'll go to 70. This is very, very cool stuff. So you want to be using it. Now final note, if you do use a more traditional backend server, like Laravel, it might be a little confusing to figure out how to get this working, but don't worry, I've already Integrating with Backend Servers 3:34Now final note, if you do use a more traditional backend server, like Laravel, it might be a little confusing to figure out how to get this working, but don't worry, I've already done the work, and I've made it as simple as possible. So I will show you how to do that in the very next episode.
