title: How to show errors on browser and which file in reactjs with webpack?
body: <p>I have setup a react environment with webpack and my webpack config is below:</p>
  
  <pre><code>var path = require('path');
  
      module.exports = {
  
          entry: path.resolve(__dirname, 'src') + '/app/index.js',
          output: {
              path: path.resolve(__dirname, 'dist') + '/app',
              filename: 'bundle.js',
              publicPath: '/app/'
          },
          module: {
              loaders: [
                  {
                      test: /\.js$/,
                      include: path.resolve(__dirname, 'src'),
                      loader: 'babel-loader',
                      query: {
                          presets: ['react', 'es2015']
                      }
                  },
                  {
                      test: /\.css$/,
                      loader: 'style-loader!css-loader'
                  }
              ]
          }
      };
  </code></pre>
  
  <p>If I have any syntax error, it is showing that in console and referring the <code>bundle.js</code> and it is impossible to find where I have made mistake in my original files. I have tried:</p>
  
  <pre><code>devServer: {
          contentBase: buildFolder
          overlay: true
      }
  </code></pre>
  
  <p>But it did not work.</p>
  
  <ul>
  <li>How can I show it in the browser screen like <code>create-react-app</code> shows?</li>
  <li>How to refer to the original file the error is coming from.</li>
  </ul>