title: How to build React app with Babel for Internet Explorer 11?
body: <pre><code>// webpack.config.js
  
  const webpack = require('webpack');
  const precss = require('precss');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const PROD = process.env.NODE_ENV === 'production';
  
  const jsPresets = [
    ['env', {
      targets: PROD ? {
        'browsers' : [
        'last 4 versions',
        'safari &gt;= 7',
        'Explorer 11',
        ]
      } : {
        chrome: 1,
      },
    }],
    'es2015',
    'stage-1',
  ];
  
  const baseConfig = {
    entry: [
      'babel-polyfill',
      'antd/dist/antd.css',
      './node_modules/m-react-splitters/lib/splitters.css',
      './node_modules/cli-truncate/index.js',
      '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: './wp-content/plugins/clausehound/js',
      filename: 'clausehound.js',
    },
    module: {
      loaders: [{
        test: /\.json$/,
        loader: 'json-loader',
      }, {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?-url!postcss'),
      }, {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        include: /cli-truncate\/index.js/,
        loader: 'babel-loader',
        query: {
          presets: jsPresets,
          plugins: [
            ['import', { libraryName: 'antd' }],
            ['transform-es2015-arrow-functions'],
          ],
        },
      }, {
        test: /\.jsx/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: jsPresets.concat(['react']),
        },
      }],
      rules: [
        { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' }
      ],
    },
  
    postcss: () =&gt; [precss],
  
    plugins: [
      new ExtractTextPlugin('../css/clausehound.css', { allChunks: true }),
      new webpack.OldWatchingPlugin(),
    ],
  };
  
  // Modify config if production build or not
  if (PROD) {
    module.exports = Object.assign({}, baseConfig, {
      plugins: baseConfig.plugins.concat([
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
        new webpack.DefinePlugin({
          process: {
            env: {
              NODE_ENV: JSON.stringify('production'),
            },
          },
        }),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        }),
        [
        'transform-es2015-arrow-functions',
        'transform-class-properties',
        'syntax-class-properties',
        ],
      ]),
    });
  } else {
    module.exports = baseConfig;
  }
  </code></pre>
  
  <p>IE11 is breaking at arrow function syntax. Majority, if not all, of the node modules have arrow functions going on in them and I don't want to include the entirety of it in the bundled js file. I have the babel-loader running and just to test, I included the file from 'cli-truncate' that is throwing a syntax error to the <code>baseConfig</code>'s <code>entry</code> property but the app still throws the error at () => in that package's index.js.</p>
  
  <p>The exact line that the code fails from <code>cli-truncate</code> is this:
      module.exports = (input, columns, opts) => {..}</p>
  
  <p>I don't think this is specific to this package but I am guessing I need to modify webpack config in some way, I am not sure. Any ideas how to resolve this? </p>
  
  <p>Errors: </p>
  
  <p><a href="https://i.stack.imgur.com/yS3z3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yS3z3.png" alt="IE 11 errors"></a></p>
  
  <p>File:</p>
  
  <p><a href="https://i.stack.imgur.com/ssEIl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ssEIl.png" alt="bundled file"></a></p>