React.js - babel-loader - 予期しないトークン

Question

私は解決できない問題があります。同様の質問に対しては多くの回答がありますが、それらは適用されません（私は思っています）。

私はいくつかのファイルがあります。

{ 
    "name": "react-tut", 
    "version": "0.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "dependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-add-module-exports": "^0.2.1", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.11.5", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot", 
    "setDebug": "set NODE_ENV=debug", 
    "setProduction": "set NODE_ENV=production", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC" 
} 

webpack.config.js：

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
const path = require("path"); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/client.js", 
    module: { 
     loaders: [ 
      { 
       test: /\.js?$/, 
       exclude: /(node_modules|bower|components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'], 
        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
       } 
      } 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, "src"), 
     filename: "client.min.js" 
    }, 
    plugins: debug ? [] : [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}), 
    ], 
}; 

client.js：

import React from "react"; 
import ReactDOM from "react-dom"; 

import Layout from "./components/Layout"; 

const app = document.getElementById('app'); 
ReactDOM.render(<Layout/>, app); 

Layout.js：

import React from "react"; 

export default class Layout extends React.Component { 
    render() { 
     return <h1>Wololo?</h1>; 
    } 
} 

package.jsonで始めることができます私はwebpackを実行します。このエラーが発生します：

ERROR in ./js/components/Layout.js 
Module parse failed: C:\Users\onlin\WebstormProjects\react-tut\src\js\components\Layout.js Unexpected token (5:15) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:15) 
    at Parser.pp.raise (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:923:13) 
    at Parser.pp.unexpected (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1490:8) 
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:333:12) 
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19) 
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17) 
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19) 
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19) 
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19) 
    at Parser.pp.parseExpression (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:88:19) 
    at Parser.pp.parseReturnStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1872:26) 
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1737:19) 
    at Parser.pp.parseBlock (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2009:21) 
    at Parser.pp.parseFunctionBody (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:610:22) 
    at Parser.pp.parseMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:579:8) 
    at Parser.pp.parseClassMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2155:23) 
    at Parser.pp.parseClass (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2140:10) 
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:324:19) 
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19) 
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17) 
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19) 
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19) 
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19) 
    at Parser.pp.parseExport (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2181:21) 
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1762:85) 
    at Parser.pp.parseTopLevel (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1666:21) 
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1632:17) 
    at Object.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:885:44) 
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
@ ./js/client.js 11:14-44 

エラーがLayout.jsの<文字に対応しています。私はthis tutorialに従っており、レイアウトクラスを別のファイル（client.jsから）に移動した後、このエラーが表示され始めます。どうすればこの問題を解決できますか？

Answer 1

ウェブパック設定ファイルでcomponentsフォルダがbabelから除外されるように設定されています。

module: { 
    loaders: [ 
     { 
      test: /\.js?$/, 
      exclude: /(node_modules|bower|components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', 'es2015', 'stage-0'], 
       plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
      } 
     } 
    ] 
} 

したがって、JSX構造のコンポーネント<Layout>は認識されません。