webpack babel loaderがjsxをコンパイルできない

Question

私はreact + webpack + hot moduleの代わりに簡単なボイラープレートを実行しようとしています。しかし、私は実際にbabel/jsxステップで立ち往生しており、助けが必要です。私はthis articleに従っています。

は現在、私は持っている：

webpack.config.js：

module.exports = { 
    context: __dirname + "/app", 
    entry: "./app.js", 

    output: { 
    filename: "app.js", 
    path: __dirname + "/dist", 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ["babel-loader"], 
     } 
    ], 
    }, 
} 

app/app.js：

import React from "react"; 
import Greeting from "./greeting"; 

React.render(
    <Greeting name="World"/>, 
    document.body 
); 

とapp/greetings.jsを：

import React from "react"; 

export default React.createClass({ 
    render: function() { 
    return (
     <div className="greeting"> 
     Hello, {this.props.name}! 
     </div> 
    ); 
    }, 
}); 

package.jsonでNDこの：

"devDependencies": { 
    "babel-core": "^6.18.0", 
    "babel-loader": "^6.2.7", 
    "webpack": "^1.13.3" 
    }, 
    "dependencies": { 
    "react": "^15.3.2" 
    } 

私はちょうどwebpackコンソールで実行すると、チュートリアルが言うように、それは（下とバベル）WebPACKのを実行し、全体のアプリをバンドルし、それはないはずです - ではなく、それを次のエラースロー：

$ webpack 
Hash: 9a56cc72acac2de6f40c 
Version: webpack 1.13.3 
Time: 543ms 
    + 1 hidden modules 

ERROR in ./app.js 
Module build failed: SyntaxError: C:/Users/abc/Tests/webpack-react-hmr/app/app.js: Unexpected token (7:2) 

    5 | 
    6 | React.render(
> 7 | <Greeting name="World"/>, 
    | ^
    8 | document.body 
    9 |); 
    10 | 

を私はこのトピックに新たなんだので、私は問題が何であるかを知らない、しかし確実に、WebPACKのはJSXの構文を理解することはできません。たぶんthis part of the tutorialは、日付のうち間違っているかのどちらかである：

Fortunately the Babel loader supports transforming both ES2015 and JSX which means we can get away with using a single loader instead of requiring both the babel-loader and the jsx-loader.

We can install the babel loader with the following command:

npm install babel-loader --save-dev 

私はWebPACKの/ JSX /バベルセットアップを修正するために何をすべき？

Answer 1

reactと他のES6、ES7の機能をコンパイルするには、babelプリセットが必要です。

必要なプリセットのリスト：最新

2. は
3. ステージ0

はあなたのルートに.babelrcとしてこのファイルを追加し反応します。

{ 
"presets": ["latest", "react", "stage-0"], 
} 

と、今、このインストールを実行WebPACKのを

npm install --save-dev babel-preset-latest babel-preset-react babel-preset-stage-0 

を行います。それは動作するはずです！