Learn

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:

npm install --save-dev webpack-dev-server

Next, we need an HTML document, and it should embed the JavaScript from our exit point:

<script src="./dist/main.js"></script>

To use webpack-dev-server, we’ll add start command to package.json inside of the scripts section.

"build": "webpack --watch", "start": "webpack serve"

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.

npm run build

We would next launch a second terminal and run the start command to serve the site.

npm run start

Let’s try out webpack-dev-server to see its preview features in action.

Instructions

1.

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.

2.

Next, let’s add the start command to the package.json. Note that webpack-dev-server has already been installed for us.

3.

Next, let’s run the build command to create the bundle.

Click “Run” when you’ve done it.

4.

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!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?