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