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
webpack-dev-server, we’ll add
start command to package.json inside of the
"build": "webpack --watch", "start": "webpack serve"
This is building our project and then serving it to the browser.
build command is going to compile our project as well as update it when we make changes.
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.
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!