How to configure webpack-serve?

Question

I was trying to set up a webpack development server, following the tutorial, in which it is done with webpack-dev-server, but since it doesn't work with webpack-cli v4, I decided to use webpack-serve (version 3.2.0). My folder structure looks like this. index.js and test.js are bundled, they are supposed to log some number and a string to the console, index.html in dist folder is connected to bundle.js. My package.json is:

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-serve --config webpack.config.js --host localhost --port 8080 --open"
  },
  "author": "Alex",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-serve": "^3.2.0"
  },
  "dependencies": {}
}

and webpack.config.js looks like this:

const path = require("path");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
};

When I run "start" script, it opens a page with 'Not found / 404' error, here it says, that it must be trying to serve index file, but couldn't find one. When in "start" script I do not specify host and port, it opens a page on http://[::]:55555/ and I get 'Unable to connect error', nothing from my bundle gets logged to the console. Path seems fine to me. Changing devServer to serve in webpack.config.js produces an error in the command line: configuration has an unknown property 'serve'. Please help me find the problem and get the server running.

Answer 1

Try with below configuration,

{
 "webpack": "^5.1.3",
 "webpack-cli": "^3.3.12",
 "webpack-dev-server": "^3.11.0"
}

"scripts": {
  "start": "webpack-dev-server --config webpack.config.js --host localhost --port 8080 --open"
}