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

3 min readApr 23, 2020

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.

Create a new folder and navigate into the folder.

mkdir demo && cd demo

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

npm init -y
npm install webpack webpack-cli --save-dev

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.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"  }

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.

const path = require("path");module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

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.

mkdir dist && cd dist && touch index.html

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.

<html>
  <head>
    <body class="container">    </body>    
   </head>
 </html>

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

Run

npm run build

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

Your file structure should now look like below.

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

document.querySelector(".container").innerHTML = `<div>Hello from Webpack </div>`;

Run

npm run watch

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

Install webpack-dotenv package using

npm install dotenv-webpack --save-dev

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

HELLO = "hi from webpack"

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

// webpack.config.js
const path = require("path");
const Dotenv = require("dotenv-webpack");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [new Dotenv()],
};

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

UPDATE 06/22/2020

How to use dotenv with webpack.

Written by Adebola Adeniran