How does one set up a dead simple webpack-dev-server project?

Question

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.

Harshal Patil · Accepted Answer · 2019-07-18 03:19:18Z

4

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.

answered Jul 18, 2019 at 3:19

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nickstaroba Over a year ago

Thank you! This led me to what I needed to do. I added a webpack.config.js file with only the plugin property set using HtmlWebPackPlugin. I removed the script tag from the index.html file and moved the file into my src directory. I will edit my question to add the full details of the setup.

Collectives™ on Stack Overflow

How does one set up a dead simple webpack-dev-server project?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related