Webpack babel-loader不解析箭头函数

Question

我正在添加一些对现有网站的反应，并试图建立webpack和babel。当我不试图包含箭头函数或扩展时，Webpack的工作是正确的。当我尝试包括这些时，我会得到一个“意外的标记”错误。我已经找了好几个小时了，所以如果能帮上忙就太好了。我在窗户上。

webpack.config.js

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        homeRefine: [path.join(__dirname, './js/react/src/home-refine.js')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, './js/react/dist')
    }
};

package.json

{
  "name": "blank",
  "version": "1.0.0",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-postcss": "^6.1.1",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.14.0"
  },
  "scripts": {
    "pack": "webpack --config webpack.dev.config.js",
    "watch": "webpack --watch --config webpack.dev.config.js",
    "production": "webpack --config webpack.prod.config.js"
  }
}

HomeSearchRefine.js

import React from 'react';

class HomeSearchRefine extends React.Component {
    constructor() {
        super();
        this.state = {
            arkona: "cag"
        };
    }

    componentWillMount() {
        fetchCars(this.state.arkona);
    }

    fetchCars = (arkona) => {
        console.log(arkona);
    };

    render() {
        return (
            <div className="search-filters">
                <p>Hello world</p>
            </div>
        )
    }
}

export default HomeSearchRefine;

终端输出

C:\dev\websites\choice\Choice (homepage-react) (choice@1.0.0)
λ npm run pack

> choice@1.0.0 pack C:\dev\websites\choice\Choice
> webpack --config webpack.dev.config.js

Hash: 6dca2e265a78f9c74bb5
Version: webpack 1.14.0
Time: 2493ms
               Asset    Size  Chunks             Chunk Names
homeRefine.bundle.js  740 kB       0  [emitted]  homeRefine
   [0] multi homeRefine 28 bytes {0} [built]
    + 179 hidden modules

ERROR in ./js/react/src/components/HomeSearchRefine.js
Module build failed: SyntaxError: C:/dev/websites/choice/Choice/js/react/src/components/HomeSearchRefine.js: Unexpected token (15:11)

  13 |  }
  14 |
> 15 |  fetchCars = (arkona) => {
     |            ^
  16 |          console.log(arkona);
  17 |  };
  18 |

 @ ./js/react/src/home-refine.js 9:24-64

Answer 1

像这样在组件中定义fetchCars

fetchCars(arkona) {
  console.log(arkona);
}