如何解决VSCode中手动配置ReactJS项目调试断点无效问题？

断点被忽略的核心原因并非缺少特定依赖，而是你的Webpack配置缺少Source Map生成配置——create-react-app默认内置了调试友好的Source Map配置，而手动配置未添加，导致编译后的代码无法与原始源码对应，调试器找不到断点位置。

1. 核心修复：添加Webpack Source Map配置 #

在你的Webpack配置中添加devtool字段，指定development模式下的Source Map类型，推荐使用eval-source-map（兼顾构建速度与调试准确性）：

修改后的Webpack配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports =  {
    entry: "./index.js",
    mode: "development",
    // 添加Source Map配置
    devtool: 'eval-source-map',
    output : {
        path: path.resolve(__dirname, "./public/dist"),
        filename: "main.js",
    },
    plugins: [new HtmlWebpackPlugin({template: "./public/index.html"})],
    target: "web",
    devServer: {
        port: "9500",
        static: {
            directory: path.join(__dirname, "./public"),
        },
        open: true,
        hot: true, 
        liveReload: true,
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ],
    }
}

2. 确认必要依赖是否齐全 #

虽然核心是配置问题，但需确保已安装以下依赖（若未安装，执行对应npm命令）：

• Webpack核心依赖：

  npm install --save-dev webpack webpack-cli webpack-dev-server
  

• Babel相关依赖：

  npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
  

• 其他配置中用到的依赖：

  npm install --save-dev html-webpack-plugin style-loader css-loader
  

3. 调试验证 #

修改配置后，重启webpack-dev-server，重新设置断点并启动调试，此时断点应该能正常触发。

额外说明 #

你的launch.json配置基本没问题，若仍存在断点不命中的情况，可检查webRoot是否与项目结构匹配：如果你的源码文件（如index.js、组件文件）在根目录，当前"webRoot": "${workspaceFolder}"是正确的；若源码在src目录，可修改为"webRoot": "${workspaceFolder}/src"。

内容的提问来源于stack exchange，提问作者interesting