Developing with continuous feedback with hot reloading

Hot reloading is a really useful technology that lets you develop while looking at the results in the browser, without even refreshing the page. It's a very tight loop and can really speed up your development process. In the official Webpack template, hot reloading is installed by default. In this recipe, you will learn how to install it yourself.

Getting ready

Before attempting this recipe, you should have at least a vague idea of how Webpack works; the Organizing your dependencies with Webpack recipe in this chapter will have you covered.

How to do it...

Create a new npm project in a new directory, either with npm init -y or yarn init -y. I personally prefer the second one because the resulting package.json is much more compact.

Note

To install Yarn, you can use the npm install -g yarn command. The main benefit of Yarn is that you will be able to lock your dependencies to a known version. This prevents bugs when working in teams and the...