react整合webpack时，遇到的syntaxerror

在开发react时，加入webpack时，遇到了如下错误

webpack.config.js配置如下

var webpack = require('webpack');

module.exports = {
	devtool: 'eval-source-map',
	entry: __dirname + '/src/index.js',
	output: {
		path: __dirname + '/build',
		filename: 'bundle.js'
	},

	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			}
		]
	},

	devServer: {
		contentBase: './public',
		color: true,
		historyApiFallback: true,
		inline: true
	}
}

原因在于没有添加对jsx语法的支持，在webpack中，需要添加，

query: {
	presets: ['react', 'es2015']
}

整合后的webpack如下

var webpack = require('webpack');

module.exports = {
	devtool: 'eval-source-map',
	entry: __dirname + '/src/index.js',
	output: {
		path: __dirname + '/build',
		filename: 'bundle.js'
	},

	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
				query: {
					presets: ['react', 'es2015']
				}
			}
		]
	},

	devServer: {
		contentBase: './public',
		color: true,
		historyApiFallback: true,
		inline: true
	}
}

同时，还需要下载相应的组件

npm install --save-dev babel-preset-react
mpm install --save-dev babel-preset-es2015

到了这，再次执行

npm start

便不会出现问题了

方案参考如下

http://www.tuicool.com/articles/ZV3eqaJ