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

file structure using webpack

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

  1. 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()],
};

--

--

--

Growth at Moni(YC W22) | Adebola.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Set Multiple Styles Easily with One Line of Vanilla JavaScript Code?

NextJS authorization based on Drupal cookies session

Creating a Highly Customizable Personal Site with Netlify CMS and Eleventy

Best Vue Input Components — Sliders and Phone Number Input

Advanced form validation with Angular and Joi

Vuetify — List Item Icons and Avatars

Built-In Module Imports and Exports: JavaScript ES6 Feature Series (Part 7)

JavaScript Best Practices — Compound Statements

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
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) | Adebola.dev

More from Medium

Filter duplicates from arrays of objects in JS

Configure Jest and Babel to test a simple React App

Using Switch Statements Conditionals in Javascript

Bootstrap a frontend project with Primereact and Typescript