title: Getting object spread to work with webpack.config and babelrc files
body: <p>I am trying to get the object spread operator to work with my react project. It comes up with a syntax error:</p>
  
  <p><a href="https://i.stack.imgur.com/YsRC8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsRC8.png" alt="spread operator error"></a></p>
  
  <p>I have tried using <code>babel-plugin-transform-object-rest-spread</code> as described by the babel <a href="https://babeljs.io/docs/plugins/transform-object-rest-spread/" rel="nofollow noreferrer">docs</a>.</p>
  
  <p>After a bit of research I also tried the config described in GitHub issues for <a href="https://github.com/babel/babel-loader/issues/170" rel="nofollow noreferrer">babel</a>:
  <a href="https://i.stack.imgur.com/Czk0D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Czk0D.png" alt="babelrc config for spread operator"></a></p>
  
  <p>Please see my <strong>.babelrc</strong> file below:</p>
  
  <pre><code>{
      "presets": ["es2015"],
      "plugins": ["transform-object-rest-spread"],
      "sourceMaps": true,
      "retainLines": true
  }
  </code></pre>
  
  <p>And my <strong>webpack.config</strong> file below:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'public', 'js'),
      publicPath: '/'
    },
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          include: path.resolve(__dirname, 'src'),
          loader: 'babel-loader',
          options: {
            presets: ['react', 'es2015']
          }
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test:/\.scss$/,
          use: [{
                  loader: 'style-loader'
              }, {
                  loader: 'css-loader'
                  }, {
                  loader: 'sass-loader', options: {
                      sourceMap: true
                  }
              }]
        },
        {
          test: /.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader'
        }
      ]
    },
    devServer: {
     historyApiFallback: true,
     contentBase: path.join(__dirname, 'public'),
     publicPath: '/js/',
     port: 3000
   }
  };
  </code></pre>
  
  <p>And my code where I'm using the spread operator is:</p>
  
  <pre><code>import * as types from '../types/types'; 
  
  const initialState ={
      mesage:''
  }
  
  export default function doodlesReducer (state = initialState, action) {
      switch(action.type) {
          case 'SET_MESSAGE' :
          return {…state, message: action.payload.message}
          default :
          return state
          }
  }
  </code></pre>
  
  <p>Can anyone help me try and figure out the right configuration to use the object spread operator?</p>