title: webpack 4 react unexpected token ...(spread operator)
body: <p>Recently i have implemented <code>Webpack 4</code> setup for my <code>react</code> app. </p>
  
  <p>My <code>webpack.config.js</code> looks like this</p>
  
  <pre><code>const HtmlWebPackPlugin = require('html-webpack-plugin');
  
  const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: './src/index.js',
    filename: './index.html',
  });
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]_[local]_[hash:base64]',
                sourceMap: true,
                minimize: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [htmlWebpackPlugin],
  };
  </code></pre>
  
  <p>Here is my <code>package.json</code> scripts </p>
  
  <pre><code>"scripts": {
      "dev": "webpack-dev-server --mode development --open",
      "prod": "webpack --mode production"
  }
  </code></pre>
  
  <p>Here the problem is when i use <code>...</code>(spread operator) it's throwing an <code>error</code> i believe this is something related to <code>babel</code> which is not properly transpiling. Any suggestions would be appreciated. Thanks.</p>
  
  <p>It throws an <code>error</code> something like the one below.</p>
  
  <pre><code> ERROR in ./src/index.js
      Module build failed: SyntaxError: D:/cp/src/index.js: Unexpected token (31:6)
  
        29 |   return {
        30 |     headers: {
      &gt; 31 |       ...headers,
           |       ^
        32 |       authorization: token ? `Bearer ${token}` : null,
        33 |     },
        34 |   };
  </code></pre>