解决webpack3中JS箭头函数报错

网上很多配置babel的方法，都是适用于老的webpack.config.js的格式，我搭了一个新的react项目，发现react里class下的静态函数用箭头函数声明会报错，就自己折腾了半天，终于发现了一个办法解决，不讲为什么，直接上代码

npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-plugin-transform-class-properties

装了四个babel的包， 然后在.babelrc中

{
"presets": [ "react","es2015","stage-0"],
"plugins": [
"transform-class-properties"
]
}

最后在webpack.config.js中

module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
}
}
},
]
},

其实主要是第三步，这里use的写法和webpack老版本不一样。

在preset中，react放在前面可以支持箭头函数作为class的静态方法，es2015放在前面就不行。

原因还没闹明白，先记下解决办法，希望能帮助到更多人。