Arrow Function syntax not working with webpack? : <p>I'm making an app on react-redux. I'm using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me error as :</p>

<pre><code>Module build failed: SyntaxError: Unexpected token (34:15)

};

&gt; handleSubmit = (event) =&gt; {
                  ^
  event.preventDefault();

  this.props.dispatch(actions.addTodo(this.state.inputText));
</code></pre>

<p>My webpack configuration file looks like as follows :</p>

<pre><code>module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/client.js'
  ],
  output: {
    path: require('path').resolve('./dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        }
      }
    ]
  }
};
</code></pre>

<p>and I'm using following babel packages in my package.json :</p>

<pre><code> "babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
</code></pre>

<p>What would have gone wrong?</p>
