Webpack devServer does not respect devServer options in webpack.config.js

Question

I have been scratching my head for 4 hours and am now resorting to Stack Overflow.

I have a SUPER simple Webpack project. Here is my webpack config:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname)
    },
    devServer: {
        port: 3000,
        host: 'localhost',
        historyApiFallback: {index: 'index.html'}
    }
};

Here is my file structure:

node_modules/
src/
├─ index.js
index.html
main.js
package.json/
webpack.config.js/

Really simple.

In src/index.js I have console.log('Hello') . Just that one line.

I also have an index.html in the project root with the emmet boilerplate code with a script tag that imports main.js from the project root.

This is my package.json :

{
    "name": "threejstinkering",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-serve",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.25.0",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-serve": "^3.2.0"
    },
    "dependencies": {}
}

Problem

When I run npm run dev Webpack gives me the following output:

webpack-serve

⬡ webpack: Watching Files
(node:2640) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
⬡ wps: Server Listening on: http://[::]:55555

⬡ webpack: asset main.js 69.9 KiB [emitted] [compared for emit] (name: main)
  runtime modules 25.7 KiB 9 modules
  cacheable modules 23.6 KiB
    modules by path ./node_modules/webpack-plugin-serve/lib/client/ 22.5 KiB
      modules by path ./node_modules/webpack-plugin-serve/lib/client/*.js 8.02 KiB
        ./node_modules/webpack-plugin-serve/lib/client/client.js 3.32 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/log.js 756 bytes [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/ClientSocket.js 2.27 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/hmr.js 1.69 KiB [built] [code generated]
      modules by path ./node_modules/webpack-plugin-serve/lib/client/overlays/*.js 14.5 KiB
        ./node_modules/webpack-plugin-serve/lib/client/overlays/progress-minimal.js 1.69 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/progress.js 3.43 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/status.js 8.21 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/util.js 1.17 KiB [built] [code generated]
    ./src/index.js 22 bytes [built] [code generated]
    ./node_modules/webpack-plugin-serve/client.js 1.05 KiB [built] [code generated]
  0 (webpack 5.25.0) compiled successfully in 94 ms 

By the logs it opens a server on port 55555??? And when I go there it seems to load the right page but the hot reloading feature of the webpack dev server fails because I get the following error in my browsers console:

ClientSocket.js:44 WebSocket connection to 'ws://[::]:55555/wps' failed: 
connect @ ClientSocket.js:44
ClientSocket @ ClientSocket.js:25
run @ client.js:27
eval @ client.js:35
eval @ client.js:36
./node_modules/webpack-plugin-serve/client.js @ main.js:18
__webpack_require__ @ main.js:137
(anonymous) @ main.js:1147
(anonymous) @ main.js:1149
ClientSocket.js:59 ⬡ wps: The client WebSocket was closed. Please refresh the page

No matter what I try, Webpack does not seem to respect my choice of port 3000 and the websocket connection for hot reloading fails. What is my rookie mistake? It's a simple project. My other webpack projects based around React work but not this one (I want to learn Three.js). Is there a difference between the two I am missing?

Thanks so much for the help.

Answer 1

Thanks to @khan all I needed to do was exclude the hyphen in webpack-serve to webpack serve . I cannot believe it!! Knew it was something simple! Bit of a facepalm moment but I know I won't make that mistake again.