使用 VSCode 调试器和源映射调试 webpack + babel

Question

So, I have an index.js with some code that is incompatible with Node.js v12.0.0 which I am forced to use. I have a webpack configuration that is running with babel to transpile and minify this. I have an NPM script which will run webpack with a devtool specified (see below). Now, all I want to do is step through my original code from within VSCode using those sourcemaps. I have been twiddling with it for hours and I cannot get VSCode to use the sourcemaps. This is also all quite new to me so please pardon my incompetence.

index.js

exports.handler = async () => {
    const asdf = {};

    console.log(asdf?.d ?? 3);
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'index.js',
        library: {
            type: 'commonjs'
        }
    },
    module: {
        rules: [
            {
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env', {
                                    targets: {
                                        node: '12.0.0'
                                    },
                                }
                            ]
                        ],
                    }
                },
            }
        ]
    },
    target: 'node12.0'
};

package.json

{
    "scripts": {
        "dev": "webpack --mode=development --devtool=source-map",
        "build": "webpack --mode=production"
    },
    "devDependencies": {
        "@babel/core": "^7.16.5",
        "@babel/preset-env": "^7.16.5",
        "babel-loader": "^8.2.3"
    }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceFolder}/tester.js",
            "sourceMaps": true,
            "console": "integratedTerminal",
        }
    ]
}

Finally, I have this little program to execute the handler function in index.js

tester.js

const { handler } = require("./index");

handler();

After running npm run dev , I get dist/index.js and dist/index.map.js. But, when I run the launch configuration I have, it seems that VSCode is running node directly on the original index.js instead of the transpiled output and that causes node to break (since the null guard doesn't exist in version 12.0.0). I would expect the VSCode debugger to catch any breakpoints in the original index.js while referring to the sourcemap for the transpiled code. I am quite clueless at this point. Any pointers would be greatly appreciated.

Please note that I have webpack and webpack-cli installed globally (hence the absence of them in package.json).

Answer 1

Apparently a bit more motivation in my Googling led me to the answer. In tester.js, I should have been requiring the transpiled index.js from the dist folder. You need to run your transpiled file for the debugger to use the source maps, not the other way around.

tester.js

const { handler } = require("./dist/index");

handler();