Breakpoints broken when placed in VSCode/Javascript on Chrome

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" } ] } };