Отладка приложения React / Webpack с VS Code Chrome Отладчик игнорирует точки останова

Question

Я использую реакцию с веб-пакетом с VS Code в качестве редактора. Поэтому я хочу использовать для моего приложения инструмент отладчика VS Code и установить расширение Debugger для Chrome. Но когда я устанавливаю точки останова в VS VS Code и запускаю инструмент отладчика, точки останова отображаются как непроверенные точки останова и никогда не получают удар. Вот мой конфиг:

{
        "type": "node",
        "request": "launch",
        "name": "Launch Webpack",
        "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
        "args": ["--config","./webpack.config.js","--open"]
    }

Приложение запускается, но в отладчике ничего не происходит. Webpack conf:

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

module.exports = () => {
    const env = dotenv.config().parsed;
    // reduce it to a nice object, the same as before
    const envKeys = Object.keys(env).reduce((prev, next) => {
        prev[`process.env.${next}`] = JSON.stringify(env[next]);
        return prev;
    }, {});


    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'index_bundle.js'
        },
        module: {
            rules: [
                {
                    test: [/\.js$/], // include .js files
                    enforce: "pre", // preload the jshint loader
                    exclude: /node_modules/, // exclude any and all files in the `node_modules folder`
                    use: [
                             {loader: "babel-loader", 
                                options: {
                                presets: [
                                    "@babel/preset-env",
                                    "@babel/preset-react"
                                ],
                                plugins: [
                                    "@babel/plugin-syntax-dynamic-import",
                                    "@babel/plugin-proposal-class-properties"
                                ]
                              }

                            },

                          ]
                        },
                       {
                        test: [/\.scss$/],
                        use: [
                            { loader: "style-loader" }, 
                            { loader: "css-loader" },
                            { loader: "postcss-loader" },
                            { loader: "sass-loader" },
                       ],
                    },
                { test: /\.css$/, use: ["style-loader", "css-loader"] }
            ]
        },
        node: {
            fs: 'empty'
        },
        resolve: {
            alias: {
              COMPONENTS: path.resolve(__dirname, './src/Components'),
              ELEMENTS: path.resolve(__dirname, './src/Elements')
            }
          },
        devtool: '#inline-source-map',
        mode: 'development',
        devServer: {
            contentBase: path.join(__dirname, 'dist'),
            publicPath: 'http://localhost:8000/',
            compress: true,
            port: 8000,
            hot: true,
            historyApiFallback: true
          },
        plugins: [
            new webpack.DefinePlugin(envKeys),
            new HtmlWebpackPlugin({
                template: 'src/index.html'
            })
        ]
    }
}

Есть предложения, как правильно его использовать?