간단한 Webpack + React + ES6 + babel 예제가 작동하지 않습니다. 예기치 않은 토큰 오류

Question

jsx 구문을 컴파일하기 위해 webpack을 실행하는 동안 구문 분석 오류가 발생합니다. 누군가가 저에게 오류를 지적 할 수 있다면 고맙겠습니다. 나는 유사한 질문을 묻는다. Webpack, React, JSX, Babel - Unexpected token < 그러나 해결책은 저를 위해 작동하지 않는다는 것을 건의했다. 내 설정 파일을 같이하는 방법

이는 다음과 같습니다

package.json

{ 
    "name": "dropdowns", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "dependencies": { 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1" 
    }, 
    "devDependencies": { 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "author": "", 
    "license": "ISC" 
} 

내 webpack.config.js 파일은 내가 메인이 로컬 응용 프로그램 폴더에서

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

    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 


}; 

입니다 .js 및 IdMappingOptions.js와 같습니다.

// in IdMappingOptions.js 
import React from 'react'; 
class IdMappingOptions extends React.Component { 
    render() { 
     return <span>Hello!</span> 
    } 
} 
export default IdMappingOptions; 
// in main.js 
    import React from 'react'; 
import { render } from 'react-dom'; 
import IdMappingOptions from './IdMappingOptions'; 

render(
    <IdMappingOptions/>, document.body 
); 

node_modules/.BIN/웹팩을 실행했을 때 다음과 같은 오류 추적을 얻을 :

Hash: 396f0bfb9d565b6f60f0 
Version: webpack 1.13.1 
Time: 37ms 
    [0] ./main.js 0 bytes [built] [failed] 
ERROR in ./main.js 
Module parse failed: /scratch/parallel/repository/dropdowns/app/main.js Unexpected token (6:4) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (6:4) 
at Parser.pp.raise (/scratch/parallel/repository/dropdowns/node_module/acorn/dist/acorn.js:923:13) 

편집 : 아래의 테스트 패턴을 고정하고 webpack.config.js에 바벨 코어를 추가 의견에 따라. 여기 내거야

Answer 1

귀하의 시험에 결함이 보인다

test: "/.js$" 

이 시도 :

test: /\.js$/ 

Answer 2

프로젝트에서 바벨을 사용하려면 바벨 코어가 필요합니다. (https://github.com/babel/babel-loader#installation).

npm install --save-dev babel-core