webpack-dev-server: Errors in entry files aren't displayed properly in the browser

• This is a bug
• This is a modification request

Code

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'source-map',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: [
      {
        directory: 'dist'
      }
    ]
  }
};

// src/index.js
'use strict';

console.logz('Hello World!');  // Intentional typo

Please paste the results of webpack-cli info here, and mention other relevant information

asset main.js 256 bytes [emitted] (name: main) 1 related asset
./src/index.js 45 bytes [built] [code generated]
webpack 5.43.0 compiled successfully in 68 ms

Expected Behavior

This is how error is displayed with only Webpack, properly showing source of the index.js module:

Actual Behavior

This is how error is displayed with Webpack Dev Server:

For Bugs; How can we reproduce the behavior?

Having a typo in an entry file or any file imported by it should be enough to trigger this issue. Used packages:

• webpack v5.43.0
• webpack-cli v4.7.2
• webpack-dev-server v4.0.0-beta.3

For Features; What is the motivation and/or use-case for the feature?