How to auto-reload changes in JavaScript code using Webpack.

You just started coding.
You now know HTML, CSS and some JavaScript.
You feel like you’re getting a hand of this JavaScript thing but you’re sick and tired of hitting reload or F5 each time you make a change in your JS file.

This is the guide you’ve been waiting for.

The term for automatically seeing changes in your code come up is called — hot reload. Yes! I didn’t know that either a few months into my coding journey but look who now knows some technical jargon!

In the past, people used things like grunt and gulp to hot reload. I don’t even know what those are because I’ve never used them.

I started coding when Webpack came on the scene and that’s what I’m going to show. Simple, effortless, hot reload — for dummies!

I’ll be using Linux command line commands to do certain things. But if you’re on Windows you can do achieve these things as you usually would.

  1. Create a new folder and navigate into the folder.

2. Create a package.json file and then install the webpack-cli and webpack.

3. We need to declare two additional scripts for our webpack. We need a watch script to watch for changes in our JS files.You can also add the build script if you want.

4. Next, we need a webpack.config.js file to tell webpack what document to watch for our changes. Copy and paste the follwing piece of code in your webpack.config.js file. This file is optional. You can skip it if you’re happy with the defaults.

We’re basically instructing webpack to watch for changes inside our src directory and inside the index.js file and to output those changes to main.js.

5. Next, create 2 new folders called src and dist. Let’s create the dist folder first. Inside the dist folder, we create our index.html file.

6. In our index.html file, let’s write some simple HTML code. Notice that we’re giving our body a class name so that we can access it in our JS file.

7. Next, create the src folder. Inside the src folder, create the index.js file.


This command will automagically add the main.js file to your dist folder.

Your file structure should now look like below.

file structure using webpack

Insert the following piece of code into your index.js file.


to watch for changes in your JS files and to automatically reload the changes in your browser.

8. Open your index.html file using a live-server extension and voila! You should see a Hello from Webpack message displayed on your screen.

From here on out, any changes you make in your index.js file will be be automatically compiled into the main.js file.

UPDATE 06/22/2020

How to use dotenv with webpack.

For this part, you’ll need the webpack.config.js file we created above

  1. Install webpack-dotenv package using

2. create a .env file in the root of your application’s directory.

3. Add the following to your webpack.config.js

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store