Correctly using source-map for visual code using webpack

Question

Hello I am trying debug js code using Visual code. Visual code not stoping at breakpoint complaining its not able to find proper .

My webpack config looks like this

{
        'mode': mode,
        entry: {
            lapp: './src/app.js',
        },  
        devtool: 'source-map',
        output: {
            path: path.join(__dirname, 'build'),
            filename: '[name].js',
            publicPath: "/build/",
            libraryTarget: 'umd',
            library: 'LAPP'
        }

    },

Visual code debug config looks like

 "version": "0.2.0",
    "configurations": [

        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:8000/examples/livebuild/lapps.html",
            "webRoot": "/Users/name/Sites/LappsInternal/
        },
    ]

On exceuting .scripts from visual code says

-webpack://LAPPS/./src/app.js (/Users/name/Sites/LappsInternal/build/webpack:/LAPPS/src/app.js)

Any suggestion? There similar issue reported for visual-code in github but solutions not helping

Answer 1

update devtool config with devtool: 'cheap-module-eval-source-map'.

{
    'mode': mode,
    entry: {
        lapp: './src/app.js',
    },  
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        publicPath: "/build/",
        libraryTarget: 'umd',
        library: 'LAPP'
    }
},