correct webpack config for babel 6, react hot load, webpack middleware

Question

Having read a novel's worth of SO posts on webpack configurations I still can't get past the module parse failed error.

package.json (not all of it)

"dependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-es2015-webpack": "^6.4.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
}

structure

package.json
node_modules
.babelrc
client/
    webpack.config.js
    .babelrc         # duplicated just for shits and giggles...
    src/
        index.jsx
        components/
server/
    index.js
    //more stuff        

client/webpack.config.js

var path = require('path'),
    webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  context: __dirname + '/src',
  entry: [
    'webpack-hot-middleware/client',
    __dirname + '/src/index.jsx'
  ],
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js',
    publicPath: 'http://localhost:12345'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        include: __dirname + '/src',
        loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'],
        query: { 
          plugins: ['./babelRelayPlugin'],
          presets: ['es2015', 'react'] 
        }
      }
    ]
  }
};

.babelrc

{ "presets": ["react", "es2015", "stage-0"] }

client/src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './src/components/layout.jsx';

ReactDOM.render(<Layout />, document.querySelector('#app'));

Been poking in the dark modifying the webpack config and can't babel to transpile es6.

Recurring problems from other SO posts

1. Loaders array has to be inside module property
2. Add presets array to your .babelrc
3. npm install --save babel-preset-whatever
4. hot-loader is depreciated, use babel-preset-react-hmre
5. Loaders are loaded from right to left, top to bottom

At a loss.

Answer 1

Turns out my context property was messing everything up, the errors were not that helpful though. Docs clearly state what context does, guess I wasn't paying attention to that carefully enough.

//webpack.config.js
context: __dirname + '/client/src/',
target: 'web'

//index.jsx

//this will break everything
import Layout from './src/components/Layout.jsx' 

//this will work
import Layout from './components/Layout.jsx'

I just switched that and everything works great now.

Answer 2

easy-react

I created a small starter for myself. Just check my config, it worked for me.