在webpack中运行react-redux

Question

嗨，我正在学习这个教程，我已经根据这个教程设置了我的webpack配置。

无论如何，我有以下文件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')
)

我的webpack配置是

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]
};

当我用webpack运行应用程序时，我得到了以下错误

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 |     )

谁能帮我解决这个错误?

编辑:问题是我定义我的webpack配置的方式，预设应该在查询块内。这是我更新的webpack配置文件

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

必须指定babel预设值。您可以使用.babelrc

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

或者你可以在你的加载器查询中指定它:

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

Answer 2

你需要使用npm module 'path'来定义路径。这是webpack.config.js文件

    var HtmlWebpackPlugin = require ('html-webpack-plugin');
    var path = require('path');
    var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
        template: __dirname + '/app/index.html',
        filename: 'index.html',
        inject: 'body'
    });
    module.exports = {
        entry: [
            './app/index.js'
        ],
        output: {
            path: path.resolve(__dirname, 'dist/'),
            filename: 'index_build.js'
        },
        module: {
            loaders: [
                { 
                    test: /.js$/, include: path.join(__dirname,'/app'), loader: 'babel-loader', presets: ['es2015', 'react']  
                },
            ]
        },
        plugins: [HtmlWebpackPluginConfig]
   };