Webpack unable to local override files in Chrome

I am trying to do local override the JS files in my project (webpack-v4.29) . I am overriding the file which is under webpack:///./src/components/slider.js , but after saving the file and doing page refresh , browser does not uses the overridden file but debugs using the original file.

Is it to do something with source map , below is the config for webpack which is related to source-maps :

devtool: isProduction ? 'source-map' : 'eval-source-map',
        mode: options.mode,
        stats: 'errors-only',
        bail: isProduction,
        performance: {
            hints: false
        },
        entry,
        output: {
            path: distDir,
            filename: isProduction ? '[name]-[chunkhash:8].js' : '[name].js',
            publicPath
        }

In my project , I am dynamically importing the component JS files. I am checking if data-attribute is present in markup , then looping through all the eligible matches and loading the JS file.

Kindly let me know how to local override while using webpack