When I run my app on webpack server (webpack serve –open –config webpack.dev.js) I am testing the error source mapping. In a file print.js I have a bug. When I open website from server it displays me a bugenter image description here. I need it to show me the exact file from the bug is, not the bundle

My webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  devtool: "source-map",

  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development",
    }),
  ],
};

My webpack dev file

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    static: "./dist",
    client: {
      overlay: true,
    },
  },
});

I tried clearing cache, changing mapping methods but still nothing works. It stills shows me bundle not the exact file