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配置

现在开始解决您的问题，您可以使用下面的任何一种导航到导致问题的原始代码。仅使用源贴图才有可能。

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

要么

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

例如，

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