是否可以配置 launch.json 来调试 webpack 开发服务器？就我而言，我正在开发一个通用(通过 Express 服务器渲染)React 应用程序，如果能够直接在 VS Code 中调试服务器端，那就太好了。

请您参考如下方法:

我一直在使用 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“源”选项卡。在“源”选项卡中的导航器(默认情况下位于左侧)中，打开网络选项卡并查看文件夹结构。

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

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

现在，您应该能够在此处找到转译文件和原始源文件(如果没有，请仔细检查您的“devtool”是否设置为“source-map”或“cheap-eval-source-map” .现在,您需要将每个源文件映射到它们在硬盘上的位置。最好,您希望通过文件扩展名映射它们,而不是单独映射它们。在 Vue 的情况下,我必须将 .js 和 .vue 文件映射到它们相应的位置，以及单独映射的节点模块文件夹(如您在我的 launch.json 中看到的)。这可能是一个不同的 React 映射。

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

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