I cloned this repository to get started working with Pixi.js in TypeScript. I'm completely new to Webpack and I have absolutely no idea what it's doing or how to control it. My hope was to get a bit more familiar with it as time went on and slowly make the changes I needed, but right off the bat I'm completely stumped and I can't figure any way to move forward without a seemingly very deep understanding of the inner workings of a whole heap of arbitrary technologies.

I'm trying to get a Web Worker running in my TypeScript file. Usually (when working with Vanilla JS) you simply create a new Worker() and pass in the path to your JavaScript file... But obviously that doesn't work because I'm writing TypeScript files and they're being mysteriously compiled by TSC and bundled with Webpack. I have no idea what happens in the background, and I have no idea how to debug this or what resources to look for on the internet that explain even an ounce of what's going on.

My Webpack config file says that it should be outputting to the working directory into a folder called "dist" with the filename of "bundle.js", or at least I think that's what it's saying.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
}

But I see no such directory "dist" after running npm start and the mysterious local sever that Webpack is running simply serves an index.html file into its root directory at localhost. I tried adding a worker.ts file into the same directory that it's magically compiling my index.ts file from, but that worker file never gets compiled and searching for it at localhost:1234/worker.ts or localhost:1234/worker.js both yield a 404. It seems Webpack is just ignoring my code and somehow arbitrarily picking some files to compile but not others?

How do I tell it to compile my worker's code, how do I figure out where it's outputting to, and how do I figure out what path my worker's code will be under so I can input it into the new Worker() constructor? And, slightly off-topic, but what is a good source to learn how Webpack works? Their website and documentation are extremely useless.

As requested by Nalin Ranjan, here is my package.json

{
    "license": "",
    "scripts": {
        "start": "webpack serve --mode=development",
        "build": "run-s clean build-only",
        "build-only": "webpack --mode=production",
        "clean": "rimraf dist"
    },
    "dependencies": {
        "pixi.js": "^6.3.0"
    },
    "devDependencies": {
        "copy-webpack-plugin": "^10.2.4",
        "html-webpack-plugin": "^5.5.0",
        "npm-run-all": "^4.1.5",
        "rimraf": "^3.0.2",
        "terser-webpack-plugin": "^5.3.1",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.5",
        "webpack": "^5.68.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.7.4"
    }
}