In this exercise, we will use a tool called webpack-dev-server to preview our code and update it as we make changes.
We would first install webpack-dev-server as a development dependency in a local environment:
Next, we need an HTML document, and it should embed the JavaScript from our exit point:
To use webpack-dev-server, we’ll add start command to package.json inside of the scripts section.
This is building our project and then serving it to the browser.
The build command is going to compile our project as well as update it when we make changes.
The serve command is going to serve our build and refresh when the build changes.
In order to have our project update any time we make changes, we would typically run each of these commands in a separate terminal.
We would first run the build command in one terminal, to create the bundle and wait for updates.
We would next launch a second terminal and run the start command to serve the site.
Let’s try out webpack-dev-server to see its preview features in action.
Instructions
We’ve included some HTML and JavaScript for a Soho Soup restaurant site!
Let’s start by embedding the exit point JavaScript in the HTML code.
Next, let’s add the start command to the package.json. Note that webpack-dev-server has already been installed for us.
Next, let’s run the build command to create the bundle.
Click “Run” when you’ve done it.
Create a second terminal and run the ‘start’ command to begin previewing the site! You might need to click the refresh button on the right on the first startup.
Click “Run” when you’re done.
When you edit and save the project code, you should see the preview update. We have live reloading!