Webpack: не удалось увидеть номер строки исходного файла в консоли для ошибок (используя devtool: inline-source-map)

Question

Я не могу увидеть номер строки исходного файла в консоли для ошибок.Я использовал devtool: inline-source-map в конфигурации.

Согласно документации, она действительно должна работать.(https://webpack.js.org/guides/development/#using-source-maps)

Я могу видеть исходное имя файла, но номер строки отсутствует. Хотя я вижу номер строки для предупреждения браузера. Таким образом, карта источника работает частично. (Пожалуйста, обратитесь кскриншот для ссылки.)

Ссылка на скриншот:

скриншот с консоли Google Chrome

Может кто-нибудь помочь, пожалуйстаменя здесь? Или, есть хороший способ отладки веб-пакета для этой проблемы?

Команда

node_modules / .bin / webpack --env.NODE_ENV = разработка--progress --config webpack.dev.js

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');

// the path(s) that should be cleaned
let pathsToClean = [
  'dist'
]

// the clean options to use
let cleanOptions = {
  root:     __dirname,
  verbose:  true,
  dry:      false
}

module.exports = env => merge(common(env), {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions)
  ]
});

webpack.common.js

const path =  require('path');
const webpack =  require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

var glob = require( 'glob' );
var crdir = __dirname;

var otherJsFiles = [...new Set([...glob.sync( __dirname + '/client/app/*/*.js' ), ...glob.sync( __dirname + '/client/components/*/*.js' )])];
var allCssFiles = [...new Set([...[__dirname + '/client/app/app.css'], ...glob.sync( __dirname + '/client/app/**/*.css' ), ...glob.sync( __dirname + '/client/components/*/*.css' )])];

var injectAllBundle =  [...new Set([...[__dirname + '/client/app/app.js'], ...otherJsFiles, ...allCssFiles])];

module.exports = env => {

  return {
    entry: {
      vendor: injectAllBundle
    },
    output: {
      path: __dirname + '/dist/public',
      filename: '[name].bundle.js'
    },
    resolve: {
      modules: [path.resolve(__dirname, 'client/bower_components'),'node_modules']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'client/index_template.html',
        inject : false
      }),
      new MiniCssExtractPlugin({
        filename: '[name].bundle.css',
      }),
      new CopyWebpackPlugin(
        [
          {from: 'package.json',to: path.resolve(crdir, 'dist/'),context: path.resolve(crdir)},
          {from: 'server',to: path.resolve(crdir, 'dist/server/'),context: path.resolve(crdir)},

          // moving all template html files
          {from: 'app/**/*.html',to: path.resolve(crdir, 'dist/public/'),context: path.resolve(crdir, 'client')},
          {from: 'components/**/*.html',to: path.resolve(crdir, 'dist/public/'),context: path.resolve(crdir, 'client')},

          // moving config files
          {from: 'deploy/templates/config.' + env.NODE_ENV + '.*',to: '/Users/byadav/Documents/as-toolbox/dist/configs/[2]', test: /^\/(.+\/)*config.(.+)\.j2$/, context: path.resolve(crdir)},

          // moving images and assets
          {from: '*.{ico,png,txt,jpg,gif}',to: path.resolve(crdir, 'dist/public/'),context: path.resolve(crdir, 'client')},
          {from: 'assets/**/*',to: path.resolve(crdir, 'dist/public/'),context: path.resolve(crdir, 'client')},

          // this is required for some js and css files that are manually added to index.html file
          {from: 'bower_components/**/*',to: path.resolve(crdir, 'dist/public/'),context: path.resolve(crdir, 'client')},
        ]
        , {debug: true, context: crdir}
      )
    ],
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.css$/,
          exclude: /\.app.css$/,
          use:
            [  'style-loader', // ‘style-loader’ might not be necessary anymore since MiniCssExtractPlugin.loader does the same. Though it might be true I would still recommend to leave it for the fallback.
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: {
                  url: false
                }
              }
            ]
        },
        {
          test: /\.html$/,
          exclude: [/index\.html/, /node_modules/, /index_template\.html/],
          use: [
            { loader:'ngtemplate-loader' },
            {
              loader: 'html-loader',
              options: {
                attrs: false,
                minimize: true,
                removeComments: false,
                collapseWhitespace: false
              }
            }
          ]
        }
      ]
    },
    node: {
      fs: "empty",
      path: "empty"
    }
  }

};