Webpack ES6配置

时间:2017-12-14 14:55:45

标签: reactjs webpack ecmascript-6 react-router webpack-dev-server

当我尝试使用lambda表达式或我的组件的状态时,我有这个错误:

  

模块构建失败:SyntaxError:意外的令牌>

我认为问题在于它不能识别我项目中的ES6语法。 这是我的Webpack配置文件:

//webpack configuration file
var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/frontend/public')
var APP_DIR = path.resolve(__dirname, 'src/frontend/app');

var config = {
    entry: APP_DIR +'/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'js/bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: [".jsx", ".js"]
    },
    devServer: {
        historyApiFallback: true,
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: APP_DIR,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }
};

module.exports = config;

我的.babelrc配置得很好

这是我的文件导致错误Login.jsx

import React from 'react';
import {render} from 'react-dom';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

import { Link } from "react-router-dom";
import style from "./Login.css";
export default class Login extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: "",
            password: ""
        };
    }
    //the error occurs here for the "="
    handleSubmit = (event) => {
        event.preventDefault();
        console.log('euh my man '+ this.state.email+ ': ' +this.state.password);  
    }

    handleMyChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    render() {
        return (
            <div className={style.Login}>
                <form className = {style.form} onSubmit = {this.handleSubmit}>
                    <FormGroup controlId="email" bsSize="large">
                        <ControlLabel>Email</ControlLabel>
                        <FormControl
                            autoFocus
                            value={this.state.email}
                            onChange={this.handleMyChange}
                            type="email"
                            placeholder = "email"
                        />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <ControlLabel>Password</ControlLabel>
                        <FormControl
                            type="password"
                            placeholder="password"
                            value={this.state.password}
                            onChange={this.handleMyChange}                          
                        />
                    </FormGroup>
                    <Button
                        block
                        bsSize="large"
                        //disabled={!this.validateForm()}
                        onClick = {this.handleSomething}
                        type="submit"
                    >
                        Login
          </Button>
                </form>
            </div>
        );
    }
}
//export default Login;

0 个答案:

没有答案