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

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

• javascript
• webpack
• babeljs

Share Improve this question Follow edited Mar 12, 2017 at 11:59 Madara's Ghost 175k5050 gold badges272272 silver badges314314 bronze badges asked Mar 12, 2017 at 11:51 Code WhispererCode Whisperer 23.7k2222 gold badges7272 silver badges8888 bronze badges 2

• AFAIU, you are debugging in minified build, isn't it? What help are you exactly asking? Please be specific. – Anvesh Checka Commented Mar 13, 2017 at 6:42
• Possible duplicate of webpack-dev-server: how to get error line numbers of orignal files – Michael Freidgeim Commented Nov 6, 2019 at 12:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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