Serve a webpack Bundle while Developing with webpack-dev-server
While we're developing an application, having a local server to preview our work is a great convenience. With webpack, we can take advantage of webpack-dev-server to serve up files and automatically reload the browser when we make changes. In this lesson, we'll install and configure webpack-dev-server in our boilerplate project.
Instructor: [00:00] I can run my application with npm run dev. This is going to run webpack with the watch flag. I'm going to run this. It's going to do an initial build. It's going to watch the files. It'll rebuild every time it sees a change in files.
[00:14] If I go to my browser here, I can reload. I can make a change to my app. If I reload, we'll see that change reflected. The problem here is that I'm browsing directly to this file and not running a real web server.
[00:30] I'd like to fix that, but I'd like to keep this watch mode convenience. To do that, I'm going to do an npm install with the -d flag to save it as a dev dependency, webpack-dev-server.
[00:54] With that installed, I'm going to go into my package.json file and I'm going to update my dev script. Instead of calling webpack with the watch flag, I'm going to call webpack-dev-server. I'm still going to pass it in my webpack config that's specific to my dev settings.
[01:09] I'm going to save this. Back in the terminal, I'm going to npm run dev. We'll see that it's telling us that the project is running at localhost:8080. If I take that and I switch to my browser, and I replace its file path with that localhost address, we'll see that it serves up my application just like it did before.
[01:41] Now I can come in here and I can make changes to my app. I'll save it. I'll switch back to the browser, and I'll see that is automatically going to refresh the browser. Webpack-dev-server has watched the files that are new built and then sends a signal into the browser to tell it to reload the page. We have the convenience of webpack's watch mode with the convenience of a live reload.
[02:11] I can go back in my app and any time I make changes, we'll get a new build and the browser will refresh itself.
[02:24] I can go into my webpack config dev, and I'll just say that I don't like the fact that it's hosted on port 8080. Maybe I'm using port 8080 for a dev server that serves up an API or something, and I want to control the port that webpack-dev-server uses.
[02:41] In my dev webpack config, I can create a key for a dev server. I can pass that an object and I can pass options in here, so I'll specify the port. Let's make the port 9000. I can save this. In my terminal, I Ctrl-C quit webpack-dev-server.
[03:03] I can npm run dev again. We'll see this time it's hosted from port 9000. If I switch to the browser and I change my port, we'll see that it loads up the app with the changes and the same live reload behavior will persist.
[03:30] In this terminal, I Ctrl-C to stop this. Let's do one more thing, just make this little bit more convenient. I'm going to add an additional flag in my dev script. I'm going to pass it with --open flag and I'll save this. Back in the terminal, I'll do an npm run dev. We'll see that it'll automatically open a browser window for us when we pass with that open flag.