Menu
I'm trying to set up a simple webpack JavaScript starter project with the absolute bare minimum to play with vanilla JavaScript. When I build the project, everything works fine. But if I try to run the project with webpack-dev-server, nothing updates when making changes.
This setup does not use a webpack.config.js file.
Does webpack-dev-server require a config file to make this function properly?
package.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --inline --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id="button">Click me!</button>
<div id="output"></div>
<script src="dist/main.js"></script>
</body>
</html>
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Now if I build this, clicking the button produces the "Hello!~" text as expected.
When I run npm start which uses webpack-dev-server, the same behavior happens. But when I make any changes ("Hello!~" edited to "Hello World!~"):
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello World!~";
});
... and refresh the page running at http://localhost:8080/ the changes are not reflected.
What am I missing? Do I need a webpack.config.js file to make this work?
EDIT:
The working setup now looks like this:
package.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id="button">Click me!</button>
<div id="output"></div>
</body>
</html>
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Now, when I npm start and edit src/index.js, the changes are picked up! I was hoping there would be even less complexity than this, but this is pretty sparse so I'll take it.
829
asked Nov 19 '25 14:11
The problem is the presence of <script src="dist/main.js"></script> in your index.html file. When you hit npm start or npm run start, webpack-dev-server spins up correctly. It serves the index.html and main.js file accordingly.
The webpack-dev-server has two jobs: In-memory bundling of assets and live-reloading. In-memory is required to support live reloading.
The problem happens when you make changes to index.js. Webpack indeed detects the changes, it builds but doesn't really emit bundled file back to the disk. It is built in-memory. In your case, since you have hardcoded the dist/main.js in your index.html, new main.js is not generated and you do not see the change on page refresh.
The quickest thing you can do is to run build script with watch mode. So use the following npm script in another terminal: "build": "webpack --watch". Now, on every save, the build would be generated and you can see the changes on refresh.
But this defeats the purpose of use webpack-dev-server. If this is the path, you wish to take then use something simple like http-server.
To fully harness the power of dev-server with live reloading, HMR, im-memory bundling, you would need a proper webpack.config.js file. Also, you must use html-webpack-plugin to generate index.html file so that live-reloading can work.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
