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

  1. Create a new folder and navigate into the folder.
mkdir demo && cd demo
npm init -y
npm install webpack webpack-cli --save-dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
}
const path = require("path");module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
};
mkdir dist && cd dist && touch index.html
<html>
<head>
<body class="container">
</body>
</head>
</html>
npm run build
file structure using webpack
document.querySelector(".container").innerHTML = `<div>Hello from Webpack </div>`;
npm run watch

UPDATE 06/22/2020

How to use dotenv with webpack.

  1. Install webpack-dotenv package using
npm install dotenv-webpack --save-dev
HELLO = "hi from webpack"
// 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()],
};

--

--

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