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
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!