Webpack + Babel Wrong Line Numbers in Stack Trace

Question

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.

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

Answer 1

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 //For DEV builds

or

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

E.g.,

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