我一直在使用 Webpack 开发 VueJS 应用程序，并且在挖掘了几个小时后，我能够使用 VSCode chrome 调试器成功调试它。我知道您的应用程序是 React 应用程序，但我会尝试解释我为调试工作所经历的步骤。希望这有助于您配置 launch.json 以在 VSCode 中调试 react/webpack 应用程序。这是我最后的launch.json：

    {
        // Using the chrome debugger to debug a Vue application
        "type": "chrome",
        "request": "launch",
        "name": "Chrome launch",
        // Set the URL to match the root URL of your application
        "url":"http://localhost:8000/#/",
        "webRoot": "${workspaceRoot}",
        /** Configure source map paths using the instructions below */
        "sourceMapPathOverrides": {
            "webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
            "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue",
            "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
        }
    }

对我来说，关键是正确配置 launch.json 中的 soureMapPathOverrides 选项。首先，确保 webpack 配置中的“devtool”选项已设置为“source-map”或“cheap-eval-source-map”（我使用了“source-map”，其他设置也可能有效，但我没有测试过它们）。

--设置sourceMapPathOverrides--

您想要做的是将源映射文件（默认情况下似乎被错误映射，至少对我而言）映射到它们在本地计算机上的相应位置。为此，请使用 webpack-dev-server 或 webpack 正常运行程序。然后，在 Chrome 中打开它并打开 devtools“sources”选项卡。在“来源”选项卡的导航器中（默认位于左侧），打开网络选项卡并查看文件夹结构。

您应该会看到类似于以下内容的文件夹结构：

top
    localhost:8000
        assets
        src
        ...
    (no domain)
        ...
    webpack://
        (webpack)
            ...
        (webpack)-dev-server
            ...
        .
            ...
        src
            ...

现在，您应该能够在这里的某处找到转换后的文件和原始源文件（如果没有，请仔细检查您的“devtool”是否设置为“source-map”或“cheap-eval-source-map”。现在，您需要将每个源文件映射到它们在硬盘驱动器上的位置。最好是通过文件扩展名而不是单独映射它们。在 Vue 的情况下，我必须将 .js 和 .vue 文件映射到它们对应的位置, 单独映射 node-modules 文件夹（如您在我的 launch.json 中所见）。它可能会是不同的 react 映射。

设置 launch.json url 以匹配您的 webpack 应用程序的 URL，并且您的 launch.json 应该被设置！

现在，您应该能够使用 webpack-dev-server（或 webpack）运行该文件，然后启动调试器。您应该能够在 VSCode 中设置断点并正常调试。希望这对某人有所帮助。