Source maps and how it works

Your production JavaScript is minified. Variable names are gone. Line numbers are meaningless. When a bug hits production, the stack trace points to line 1, column 48293 of app.min.js.

Source maps fix this. They're a mapping file that connects the minified code back to your original source. Your browser's dev tools read this file and show you the real code when debugging.

Enabling source maps with Webpack

Set devtool: "source-map" in your Webpack config. Webpack generates a .map file alongside your bundle and adds a sourceMappingURL comment to the minified output:

// webpack.config.js
module.exports = {
    // ...
    entry: {
      "app": "src/app.js"
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].js",
      sourceMapFilename: "[name].js.map"
    },
    devtool: "source-map"
    // ...
}

The trade-off

Source maps make debugging possible. But they also expose your original source code. In production, either serve them only to your error-tracking service (Sentry, Datadog) or don't serve them publicly at all. Most teams upload source maps to their monitoring tool and exclude them from the public build.