Problem running react-redux mit webpack

Question

Hi Ich ging durch this Tutorial und ich habe meine Webpack-Konfiguration basierend auf this Tutorial.

Unabhängig habe ich die folgende Datei index.js

import React from 'react' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import todoApp from './reducers' 
import AppComp from './components/App' 

let store = createStore(todoApp) 

let App = React.createClass({ 
    render:() => { 
    return (
     <Provider store={store}> 
     <AppComp /> 
     </Provider> 
    ) 
    } 
}); 

render(
    <App/>, 
    document.getElementById('app') 
) 

Und meine webpack Konfiguration

var HtmlWebpackPlugin = require ('html-webpack-plugin'); 
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
     './app/index.js' 
    ], 
    output: { 
     path: __dirname + '/dist', 
     filename: 'index_build.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react'] 
      }, 
     ] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
}; 

Wenn ich die app mit webpack laufen, bekam ich folgende Fehlermeldung

ERROR in ./app/index.js 
Module build failed: SyntaxError: Unexpected token (13:6) 

    11 | render:() => { 
    12 |  return (
> 13 |  <Provider store={store}> 
    |  ^
    14 |   <App /> 
    15 |  </Provider> 
    16 | ) 

Kann mir jemand helfen, diesen Fehler zu beheben?

Bearbeiten: Das Problem war die Art und Weise, wie ich meine Webpack-Konfigurationen definiert, die Voreinstellungen sollten im Abfrageblock sein. Hier ist meine aktualisierte Webpack-Konfigurationsdatei

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/index.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: "index_bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
      presets: ['react', 'babel-preset-react'] 
      } 
     } 
    ] 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
}; 

Answer 1

Sie müssen Babel-Voreinstellungen angeben. Sie können .babelrc verwenden

{ 
    "presets": [ 
    "react", 
    "es2015" 
] 
} 

oder Sie es in Ihrem loader Abfrage angeben:

loaders: [ 'babel?presets[]=react,presets[]=es2015' ] 

Answer 2

Sie müssen npm Modul 'Pfad' für die Definition Pfad verwenden. Hier ist die Datei webpack.config.js