babel-preset-es2015 Failed to compile destructuring assignment syntax - variable-assignment

Question

I'm using babel to compile some es6 code, when I trying destructuring assignment it work well for array , but not Object destructuring. the problem code are as follow.
test(){
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a);
console.log(rest);
}
the error log:
ERROR in ./src/js/index.js
Module build failed: SyntaxError: Unexpected token (11:13)
9 | test(){
10 |
> 11 | var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
| ^
12 |
13 | console.log(a);
14 | console.log(rest);
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/js/index.js
webpack: Failed to compile.
my webpack.config.js
var webpack = require("webpack");
var path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/dist',
filename: "bundle.js"
},
module:{
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query:{
presets:['react', 'es2015']
},
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
]
},
}
anyone had solved the same problem? hope for you help thanks a lot.

Answer 1

Install babel-preset-env by running following command on terminal
npm install babel-preset-env --save-dev
Then create .babelrc file in your project and write following JSON
{
"presets": ["env"]
}
for more information follow following link
babel-preset-env

Answer 2

es2015 does not include spread properties, you can add a plugin to transform them
Take a look at this link and add this preset to your presets property