I am new to webpack and currently trying to see how it works, it should compile my typescript code and put the equivalent JS in the output file when I run the following command

webpack serve

here is my webpack config file

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module:{
    rules: [
      {
        test: /.ts$/,
        use: "ts-loader",
        include: [path.join(__dirname, 'src/')]
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'public/'),
    filename: 'bundle.js',
    publicPath: '',
  },
  mode: 'development'
}

and here is my pakage.json file

{
  "name": "typescript-practice",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve",
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

I am expecting that whatever valid TS I write into ./src/index.ts will be compiled and the equivalent JS code will be present in the file public/bundle.js but when I observe,the code is not there which means it never compiled but when I see the browser I see the changes there how ?

I tried to search the internet I see it is about publicPath: 'public'
I also tried all combinations publicPath: 'public/' publicPath: './public'
interesting thing is when I simply run command webpack then it compiles but I don’t want to compile it again and again by runing webpack I want it to automatically detect the changes and compile it.