babel-loader jsx语法错误：意外的令牌

Question

babel-loader jsx语法错误：意外的令牌我是React + Webpack的初学者。我在我的hello world web应用程序中发现了一个奇怪的错误。我在webpack中使用babel-loader来帮助我将jsx转换为js，但看起来babel无法理解jsx语法。这是我的依赖项："devDependencies": {   "babel-core": "^6.0.14",   "babel-loader": "^6.0.0",   "webpack": "^1.12.2",   "webpack-dev-server": "^1.12.1"},"dependencies": {   "react": "^0.14.1"}这是我的 webpack.config.jsvar path = require('path');module.exports = {   entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],   output: {     path: path.resolve(__dirname, 'build'),     filename: 'bundle.js'   },   module: {       loaders: [           { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}       ]   }};这是我的 app/main.jsvar React = require("react");React.render(<h1>hello world</h1>,document.getElementById("app"));这是错误信息ERROR in ./app/main.jsModule build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)   1 | var React = require("react");> 2 | React.render(<h1>hello world</h1>,document.getElementById("app"));     |              ^at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)谢谢你们。

Answer 1

由于上面的答案仍然让一些人处于黑暗中，这就是完整的webpack.config.js的样子：

var path = require('path');var config = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query:
            {
                presets:['es2015', 'react']
            }
        }]
    },};module.exports = config;