loader jsx SyntaxError：意外的令牌
这个问题在这里已经有了答案：
添加“babel-preset-react”
npm install babel-preset-react
并在webpack.config.js中将“预设”选项添加到babel-loader中
（或者可以将它添加到.babelrc或package.js中：http://babeljs.io/docs/usage/babelrc/）
这里是一个webpack.config.js的例子：
{
test: /.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel",
query:
{
presets:['react']
}
}
最近Babel 6发布了，并发生了重大变化：https：//babeljs.io/blog/2015/10/29/6.0.0
如果您使用0.14反应，您应该使用ReactDOM.render() （来自require('react-dom') ）而不是React.render() ：https： React.render()
更新2018年
Rule.query已被弃用，以支持Rule.options。 在webpack 4中的用法如下：
npm install babel-loader babel-preset-react
然后在你的webpack配置中（作为module.exports对象中的module.rules数组中的条目）
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react']
}
}
],
}
从babel 5迁移到babel 6时遇到类似的问题。
我只是运行babel来编译src到lib文件夹babel src --out-dir lib
我将分享我的设置为babel 6：
确保安装了以下babel 6 devDependencies
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
将您的.babelrc文件添加到项目中：
{
"presets": ["es2015", "stage-0", "react"]
}
由于上面的答案仍然让一些人处于黑暗中，因此完整的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;