Webpack + Babel 堆栈跟踪中的错误行号

Question

我正在使用 Webpack 和 Babel 构建一个应用程序。当应用程序遇到错误时，它会正确列出第一个错误的行号，但随后会显示每个后续步骤的缩小代码的行号。

我的 Webpack 配置如下，

const webpack = require('webpack');
const path = require('path');
module.exports = {
    module: {
        loaders: [
            {
                loader: "babel-loader",
                exclude: [
                    /(node_modules)/,
                ],
                query: {
                    presets: ['es2015','react'],
                    plugins: ['transform-object-rest-spread']
                }
            },
            {
                test:/\.less$/,
                exclude:'/node_modules',
                loader:"style!css!less"
            }
        ]
    },
    entry: {
        "index": ["./src/main"]
    },
    output: {
        path: path.resolve(__dirname, "public"),
        publicPath: "/assets",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    },
    devServer: { inline: true },
    devtool: 'source-map'
};

Answer 1

为了从 webpack 生成的构建中进行调试，您需要了解更多关于 webpack 中的 'devtool' 设置的信息。这是官方文档的链接。 Webpack Devtool Configuration

现在遇到您的问题，您可以使用以下任一方法来导航到导致问题的原始代码。这只能使用源映射。

eval-inline-source-map //用于 DEV 构建

或

cheap-inline-module-source-map //用于 PROD 构建

例如，

{
   'devtool': 'cheap-inline-module-source-map'
}