How to make webpack do source maps for lazy loading React components?

Question

JavaScript

If all application components are simply connected to one index.js, which is entry, and also in the webpack config devtool: "source-map", then in the developer console in Sources you can see the following:

photo1

But if you connect components through React.lazy and Suspense , then there are simply no maps for files connected in this way.
In this case, you can disable the creation of maps by webpack, and add the sourceMaps parameter to the options for babel, which can take the values: true/ false, "inline", "both", but all these values ​​​​create maps only in something like this:

photo2

Accordingly, the problem. You either need to somehow force webpack to make maps for all .js files, even those that are not directly connected somewhere through the entry script, but are lazy loaded, or you need babel to make the same maps as webpack.
How can this be done?

config

const path = require('path')

module.exports = {
  entry : './src/index.js',
  output : {
    filename : 'main.js',
    sourceMapFilename : 'main.map',
    path : path.resolve(__dirname, 'dist')
  },
  watch : true,
  mode : 'development',
  devtool: 'source-map',
  module : {
    rules : [
      {
        test : /\.js$/,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        options: {
          presets: [ '@babel/preset-react' ],
          plugins: [ '@babel/plugin-syntax-dynamic-import' ],
          // sourceMaps: true,
        },
      }
    ]
  }
}

Answer 1

You output.sourceMapFilenamedon't need to specify anything. Then there will be maps for all scripts

Answer 2

I won’t tell you the problem, but I can suggest looking at the config in CRA.
devtoolModuleFilenameTemplate some trick