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

Question

所以，我有一个 index.js，其中的一些代码与我被迫使用的 Node.js v12.0.0 不兼容。 我有一个 webpack 配置，它与 babel 一起运行以转换和缩小它。 我有一个 NPM 脚本，它将运行 webpack 并指定 devtool（见下文）。 现在，我要做的就是使用这些源映射从 VSCode 中逐步完成我的原始代码。 我已经玩了好几个小时了，我无法让 VSCode 使用源映射。 这对我来说也是全新的，所以请原谅我的无能。

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"
    }
}

发射.json

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

最后，我有这个小程序来执行 index.js 中的处理程序 function

tester.js

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

handler();

运行npm run dev后，我得到 dist/index.js 和 dist/index.map.js。 但是，当我运行启动配置时，似乎 VSCode 直接在原始 index.js 上运行节点，而不是转译的 output 并导致节点中断（因为 null 保护在版本 12.0.0 中不存在）。 我希望 VSCode 调试器在引用转译代码的源映射时捕获原始 index.js 中的任何断点。 在这一点上我很无知。 任何指针将不胜感激。

请注意，我全局安装了 webpack 和 webpack-cli（因此 package.json 中没有它们）。

Answer 1

显然，我在谷歌上搜索的动力让我找到了答案。 在 tester.js 中，我应该需要 dist 文件夹中的转译 index.js。 您需要为调试器运行转译文件以使用源映射，而不是相反。

tester.js

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

handler();