webpack使用babel 6打包react报错

摘要: babel 6更新后，增加了全新的特性，同时也对使用作出了重大的调整，直接导致按照babel 5的使用方式配置webpack.config.js，
将会在打包react时，报错 unexpected token。

最近在利用空余时间学习react，发现按照网上各种文章的做法来使用webpack打包react，各种提示 unexpected token：



而我使用网上demo中的babel来打包就没有问题，于是检查pakage.json，发现别人的babel-loader版本是5.x，而我的是6.2.0，网上查阅了babel 6的更新说明（babel-loader）和新特性介绍（走进Babel 6.0 全新特性解析），才知道babel 6 默认没有携带任何转换器，因此直接使用Babel进行转换，它将会原文输出你的代码，从而webpack直接报错。

现在，只需要在使用babel打包react时，为babel增加相关的2个插件预设（presets）：

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

然后，对webpack.config.js中 module属性做一些调整：

module: {loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]}

或者：

module: {loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=react,presets[]=es2015'
}]}

然后就可以愉快的使用webpack命令来打包react了。