title: Webpack 3 failing on JSX syntax
body: <p>I recently upgraded from Webpack v1 to v3 and now the build is not recognising JSX syntax from the app. I followed the documentation for v1 to v2 from <a href="https://webpack.js.org/guides/migrating/" rel="nofollow noreferrer">here</a> and then installed v3.</p>
  
  <p>webpack.config.js</p>
  
  <pre><code>const webpack = require('webpack');
  const precss = require('precss');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const path = require('path');
  
  const jsPresets = [
    ['env', {
      targets: {
        chrome: 52,
        browsers: [
          'last 4 versions',
          'safari &gt;= 7',
        ],
  
      },
    } ],
    'babel-preset-stage-2',
  ];
  
  const baseConfig = {
    entry: [
      'babel-polyfill',
      'antd/dist/antd.css',
      './wp-content/plugins/custom/js/router',
      './wp-content/plugins/custom/js/legacy/header',
      './node_modules/m-react-splitters/lib/splitters.css',
      'react-s-alert/dist/s-alert-default.css',
      'react-s-alert/dist/s-alert-css-effects/flip.css',
      'react-s-alert/dist/s-alert-css-effects/bouncyflip.css',
      'react-quill/dist/quill.snow.css',
    ],
    output: {
      path: path.resolve(__dirname, './wp-content/plugins/custom/js'),
      filename: 'custom.js',
    },
    module: {
      rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?-url',
            'postcss-loader',
          ]
        }),
      }, {
          // whatwg-fetch use Promsie which IE11 doesn't support
          test: /\.js$/,
          include: [/whatwg-.*/],
          use: {
            loader: 'babel-loader'
          },
        }, {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: jsPresets,
            plugins: [
              ['import', { libraryName: 'antd' }],
              'transform-class-properties',
              'transform-es2015-arrow-functions',
            ],
          },
        },
      }],
    },
  
    plugins: [
      new ExtractTextPlugin({
        filename: '../css/custom.css',
        allChunks: true,
      }),
      new webpack.ProvidePlugin({
        React: 'react',
        Intl: 'imports-loader?this=&gt;global!exports-loader?global.Intl!intl',
      }),
    ],
  };
  
  module.exports = baseConfig;
  </code></pre>
  
  <p>Error message thrown on terminal after webpack tries to bundle:</p>
  
  <p><a href="https://i.stack.imgur.com/ML5PT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ML5PT.png" alt="Webpack failure"></a></p>
  
  <p>I am not sure what is wrong here, any help is appreciated.</p>