webpack babel loader가 jsx를 컴파일하지 못했습니다.

Question

react + webpack + 핫 모듈 대체를위한 간단한 상용구를 실행하려고합니다. 그러나 나는 실제로 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> 
    ); 
    }, 
}); 

을 ND이 package.json에 : 튜토리얼 말한대로

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

내가 콘솔에서 바로 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 | 

나는이 주제에 새로 온 사람, 그래서 문제가 무엇인지 모르겠지만, 확실히, 웹팩은 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 

은 내가 웹팩/jsx/바벨 설치 문제를 해결하기 위해 무엇을해야합니까?

Answer 1

react 및 기타 ES6, ES7 기능을 컴파일하려면 바벨 사전 설정이 필요합니다.

필요한 사전의 목록 :

1. 최신
2. 는
3. 무대-0

이 루트에 .babelrc로이 파일을 추가 반응한다.

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

이 설치

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

에게 이제 실행 웹팩을한다. 그것은 작동해야합니다!