堆栈跟踪中的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'
}