Can set breakpoints in .js files in vscode only after started vite debugger?

Question

Why I can only set valid breakpoints in .js files in vscode AFTER starting the vite (node.js) debugger? Not working:

1. npx vite (starting the server)
2. Set breakpoint in vscode
3. Start Debugger with F5
4. New chrome window opens

Debugger does start but not react, only stoppable

Working:

1. npx vite (starting the server)
2. Start Debugger with F5
3. Set breakpoint in vscode
4. New chrome window opens

Debugger stopps at breakpoint and variables are visible. But with this methode I can only debug functions which are called after all initialisations?

// vite.config.js
import { defineConfig } from 'vite';
import dns from 'dns'

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
    server: {
        host: '127.0.0.1',
        port: 3000
    },
    build: {
        outDir: 'dist',
        emptyOutDir: true,
        rollupOptions: {
            input: {
                main: 'js/main.js',
            },
            output: {
                entryFileNames: 'bundle.js',
                assetFileNames: false,
            },
        },
        sourcemap: false
    },
    publicDir: false,
    css: false,
});

// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "enableContentValidation": false,
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${workspaceFolder}/*",
                "webpack:///js/*": "${workspaceFolder}/js/*"
            },
            "trace": true
        }
    ]
}

Any idea? Thanks...