Webpack + Babel错误的行号在堆栈跟踪中 [英] Webpack + Babel Wrong Line Numbers in Stack Trace

问题描述

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

I'm building an application with Webpack and Babel. When the application runs into an error, it correctly lists the line number for the first error but then shows the line number for the minified code for each subsequent step.

我的Webpack配置如下，

My Webpack config is as follows,

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'
};

推荐答案

为了从webpack生成的内部版本进行调试，您需要了解更多有关webpack中"devtool"设置的知识.这是官方文档的链接. Webpack开发工具配置

In order to debug from webpack generated builds, you need to understand little bit more about 'devtool' setting in webpack. Here is the link to the official documentation. Webpack Devtool Configuration

现在要解决您的问题，您可以在下面使用以下两种方法之一来导航到导致问题的原始代码.这只能使用源地图来实现.

Now coming to your problem, you can use either of these below in order to navigate to your original piece of code which caused the problem. This is possible only using sourcemaps.

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

eval-inline-source-map //For DEV builds

或

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

cheap-inline-module-source-map //For PROD builds

例如，

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

这篇关于Webpack + Babel错误的行号在堆栈跟踪中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！