webpack dev server is not logging in the console in any browser

Question

I am using Rust with webpack with npm, every time I run "webpack serve --mode=development", it runs with no errors but when I use console.log in my code, it does not print anything in the browser dev tools and it does not say webpack-dev-server is running but the page runs the static html file. Plus, live reload is not working.

Here is my code:

webpack.config.js file

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');

module.exports = {
    entry: './public/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './public/index.html'
        }),
        new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname, '.')
        })
    ],
    experiments: {
        asyncWebAssembly: true
    }
}

package.json file

{
  "name": "image-effects",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  },
  "dependencies": {
    "path": "^0.12.7",
    "wasm-pack": "^0.10.3"
  }
}

cargo.toml file

[package]
name = "image-effects"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.81"
base64 = "0.13.0"
image = "0.23.14"

[dependencies.web-sys]
version = "0.3.4"
features = ["console"]

[profile.release]
debug = true