Webpack 开发服务器显示没有源映射我的错误

Question

当我在 webpack 服务器上运行我的应用程序时（webpackserve --open --config webpack.dev.js），我正在测试错误源映射。在文件 print.js 中我有一个错误。当我从服务器打开网站时，它显示一个错误

我需要它来显示错误中的确切文件，而不是捆绑包

我的 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",
    }),
  ],
};

我的 webpack 开发文件

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

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

我尝试清除缓存，更改映射方法，但仍然没有效果。它仍然向我显示捆绑包而不是确切的文件

Answer 1

叠加层中显示的未处理的运行时错误无法显示源映射行。请参阅错误叠加显示未源映射的行问题。

但是，浏览器控制台中的错误可以显示源映射行。但您需要启用开发工具的以下设置：

设置 -> 首选项 -> 源 -> JavaScript 源映射

启用此设置之前，控制台中的错误将显示编译后的代码行：

Uncaught ReferenceError: cosnole is not defined
   at HTMLButtonElement.printMe (index.bundle.js:3299:3)
printMe @ index.bundle.js:3299

启用此设置后，重新加载

Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2:1)
printMe @ print.js:2

当您单击

print.js:2:1

时，您将从源映射导航到该文件。