How do I generate sourcemaps when using babel and webpack?

In order to use source map, you should change devtool option value from true to the value which available in this list, for instance source-map

devtool: 'source-map'

devtool: 'source-map' - A SourceMap is emitted.

Maybe someone else has this problem at one point. If you use the UglifyJsPlugin in webpack 2 you need to explicitly specify the sourceMap flag. For example:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

Minimal webpack config for jsx with sourcemaps:

var path = require('path');var webpack = require('webpack');module.exports = {  entry: `./src/index.jsx` ,  output: {    path:  path.resolve(__dirname,"build"),    filename: "bundle.js"  },  devtool: 'eval-source-map',  module: {    loaders: [      {        test: /.jsx?$/,        loader: 'babel-loader',        exclude: /node_modules/,        query: {          presets: ['es2015', 'react']        }      }    ]  },};

Running it:

Jozsefs-MBP:react-webpack-babel joco$ webpack -dHash: c75d5fb365018ed3786bVersion: webpack 1.13.2Time: 3826ms        Asset     Size  Chunks             Chunk Names    bundle.js   1.5 MB       0  [emitted]  mainbundle.js.map  1.72 MB       0  [emitted]  main    + 221 hidden modulesJozsefs-MBP:react-webpack-babel joco$