title: How do I generate sourcemaps when using babel and webpack?
body: <p>I'm new to webpack, and I need a hand in setting up to generate sourcemaps. I'm running <code>webpack serve</code> from the command line, which compiles successfully. But I really need sourcemaps. This is my <code>webpack.config.js</code>.</p>
  
  <pre><code>var webpack = require('webpack');
  
  module.exports = {
  
    output: {
      filename: 'main.js',
      publicPath: '/assets/'
    },
  
    cache: true,
    debug: true,
    devtool: true,
    entry: [
        'webpack/hot/only-dev-server',
        './src/components/main.js'
    ],
  
    stats: {
      colors: true,
      reasons: true
    },
  
    resolve: {
      extensions: ['', '.js', '.jsx'],
      alias: {
        'styles': __dirname + '/src/styles',
        'mixins': __dirname + '/src/mixins',
        'components': __dirname + '/src/components/',
        'stores': __dirname + '/src/stores/',
        'actions': __dirname + '/src/actions/'
      }
    },
    module: {
      preLoaders: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'jsxhint'
      }],
      loaders: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'react-hot!babel-loader'
      }, {
        test: /\.sass/,
        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&amp;indentedSyntax'
      }, {
        test: /\.scss/,
        loader: 'style-loader!css!sass'
      }, {
        test: /\.(png|jpg|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      }]
    },
  
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ]
  
  };
  </code></pre>
  
  <p>I'm really new to webpack, and looking though the docs hasn't really helped as I'm not sure what this problem is specific to.</p>