Debugging Typescript Webpack Project - Breakpoints are ignored - Help/Advise needed

Hello,

I have a project that mixes up several js files and ts classes compiled by tsc and bundled by webpack running on ws (local-web-server) in dev mode. map.js are generated by tsc.

I tryed several debug run configurations as described in the help but still all my breakpoints are ignored on runtime (although recognized and listed on the debugger panel).

As an example i followed this and tried to debug on localhost: https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server

Any hint how to proceed would be great! Thanks.

package.json

{
  "name": "nn",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "dev": "concurrently --kill-others \"npm run compileTSAndWatch\"  \"npm run bundleAndWatch\" \"npm run webserver\"",
    "create dist": "webpack --config webpack.prod.config.js",
    "compileTS": "tsc",
    "compileTSAndWatch": "tsc -w",
    "bundle": "webpack --config webpack.config.js",
    "bundleAndWatch": "webpack --watch --config webpack.config.js",
    "webserver": "ws",
    "test:jest": "jest",
    "coverage:jest": "jest --coverage",
    "test:cypress:open": "cypress open",
    "test:cypress:run:all": "cypress run --spec \"cypress/integration/cc2/**/*.spec.js\"",
    "clean:cypress:screenshots": "node ./npm_scripts/cleanup_cypress_screenshots.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/easeljs": "^1.0.0",
    "@types/preloadjs": "^0.6.32",
    "@types/tweenjs": "^1.0.3",
    "createjs": "^1.0.1",
    "gsap": "^3.7.1",
    "rasterizehtml": "^1.3.0"
  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.11",
    "@types/jest": "^26.0.23",
    "concurrently": "^6.0.2",
    "cypress": "^7.4.0",
    "exports-loader": "^2.0.0",
    "fs-extra": "^9.1.0",
    "glob": "^7.1.7",
    "html-webpack-plugin": "^5.3.1",
    "imports-loader": "^2.0.0",
    "jest": "^26.6.3",
    "local-web-server": "^4.2.1",
    "script-loader": "^0.7.2",
    "ts-jest": "^26.5.5",
    "typescript": "^4.2.4",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "sourceMap": true,
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "Node"
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const PACKAGE = require('./package.json');
const version = PACKAGE.version;

module.exports = {
  entry: './src/main.js',
  output: {
    filename: `perseus-en-${version}.js`,
    path: path.resolve(__dirname)
  },
  plugins: [new HtmlWebpackPlugin({
    title: `Perseus EN ${version}`,
    template: '_template/_template.html'
  })],
  resolve: {
    alias: {
      createjs: 'createjs/builds/1.0.0/createjs.min.js'
    }
  },
  module: {
    rules: [
      {
        test: /node_modules[/\\]createjs/,
        use: [{
          loader: 'exports-loader',
          options: {
            type: 'commonjs',
            exports: 'single window.createjs',
          },
        }],
      },
      {
        test: /node_modules[/\\]createjs/,
        use: [{
          loader: 'imports-loader',
          options: {
            wrapper: 'window',
          },
        }],
      },
    ]
  },
  mode: "development"
}