Breakpoints broken when placed in VSCode/Javascript on Chrome

Question

I'm running a node.js webapp using javascript and webpack which I built following this guide. I've installed the chrome debugger extension.

I run the node server using the command:

webpack-dev-server --progress --colors

I've also run webpack --devtool source-map

My launch config looks like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

After running webpack-dev-server --progress --colors and hitting F5 in VSCode Chrome loads up with the webpage, all my breakpoints appear solid red but when placed they jump a bit lower from where I placed them (including on lines which are executing code). The breakpoints also don't hit which makes me believe there's something wrong with the debug mapping. When I have breakpoints placed on occasion random files get loaded and invisible breakpoints in them are hit, like in node_modules/firebase/index.js an invisible breakpoint over a commented out line is hit.

I should also note running .scripts in vscode does yield (amongst all the modules) my entry.js file which I'm trying to hit breakpoints in, namely: -webpack:///./entry.js (d:\myproject\entry.js)

Everything is placed in the root of my directories (screenshot in case I make a mistake transposing the directories);

Also my webpack.config.js file:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

Answer 1

Problem solved!

Needed to add:

 devtool: 'inline-source-map'

To my webpack.config.js module.exports. Now breakpoints hit inline on functions everywhere.