Webpack - Babel - JSX 구문 분석 : SyntaxError : 예기치 않은 토큰

Question

webpack을 사용하여 React 응용 프로그램을 만들려고합니다. 나는 transpile .jsx 파일에 babel을 사용하고 있습니다. 하지만 그것은 .jsx 파일을로드하는 데 바벨 로더를 사용하지 않는 것처럼 보입니다. 나는 다음과 같은 오류를 수신하고 있습니다 :

var webpack = require('webpack'); 
var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var __dirname = path.resolve(); 

module.exports = { 
    context: __dirname + "/app", 
    entry: "./app.jsx", 
    output: { 
     path: __dirname + "/dist/", 
     filename: "bundle.min.js" 
    }, 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }], 
    plugins: [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
     new HtmlWebpackPlugin({ 
      template: 'index.html' 
     }) 
    ], 
}; 

내 app.jsx (./app/app/jsx에 위치)입니다 :

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

class App extends React.Component { 

    render() { 
     return <div > Test < /div>; 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('app')); 

I

ERROR in ./app.jsx 
Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (7:15) 
    at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12) 
    at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21) 
    at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19) 
    at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21) 
    at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21) 
    at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21) 
    at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21) 
    at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33) 
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34) 
    at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25) 
    at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24) 
    at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10) 
    at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25) 
    at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14) 
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19) 
    at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (C:\codebase\react-demo\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (C:\codebase\react-demo\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
    at nextLoader (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
    at C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
    at Storage.finished (C:\codebase\react-demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
    at C:\codebase\react-demo\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) 

내 webpack.config.js 같은 보이는 뒤에 오는 것 .babelrc :

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

나는 다음과 같은 한 노드 종속성이 설치 :

"devDependencies": { 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "html-webpack-plugin": "^2.22.0", 
    "react": "^15.3.0", 
    "react-dom": "^15.3.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
} 

어떤 생각 나는 무엇을 누락 될 수 있을까?

Answer 1

문제는 로더 구성에 있습니다.

속성 loaders은 객체 module에 있어야합니다.

module.exports = { 
    … 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
     }], 
    }, 
    … 
}; 

는