Cannot GET / - localhost 8080 not working with webpack dev server

Question

I have been following this tutorial online: https://www.youtube.com/watch?v=TOb1c39m64A.

I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.

These are the only packages I have installed so far:

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

I have a script called "start" that runs webpack serve, which runs successfully and displays:

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.

I have also looked at my hosts file and added a line, if you think it could help I will paste it here.

As requested here is my package.json (most of it already posted above):

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

Answer 1

Seems even in 7 months the tutorial has gone out of date.

Fix for anyone like me who is following it on a windows pc.

Added a webpack.config.js file in my root directory that looked like this:

module.exports = {
  mode: "development",

  devServer: {
    static: "./dist",
  },
};

In the tutorial it uses contentBase as the key in the devServer object, a property that appears to have been deprecated in a recent update, so static is used as a replacement.

Now everything is served to localhost and it works.