title: Webpack + babel not working with IE 11, but babel alone works
body: <p>I have a <code>index.js</code> which uses ES9 (es2018 syntax):</p>
  <pre><code>// from wikipedia
  let object = {a: 1, b: 2}
  let objectClone = {...object} // ES9 syntax
  let otherObject = {c: 3, ...object}
  console.log(otherObject) // -&gt; {c: 3, a: 1, b: 2}
  </code></pre>
  <p>I want to run this code in Internet Explorer 11 (not edge). It already works fine in Chrome, but not in IE. Babel can convert to vanilla js, which can run in IE.</p>
  <hr />
  <p><strong>Babel Setup:</strong></p>
  <p><code>package.json</code></p>
  <pre><code>  &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;webpack&quot;: &quot;^5.11.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;
    }
  </code></pre>
  <p><code>.babelrc</code></p>
  <pre><code>{ &quot;presets&quot;: [&quot;@babel/preset-env&quot;] }
  </code></pre>
  <p>I run the babel command, and point an <code>index.html</code> to the <code>dist/bundle.js</code> location. It works fine:</p>
  <pre><code>npx babel .\index.js --out-file dist/bundle.js
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3NboD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3NboD.png" alt="enter image description here" /></a></p>
  <hr />
  <p><strong>Webpack Setup:</strong></p>
  <p><code>webpack.config.js</code></p>
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
          options: { presets: [&quot;@babel/preset-env&quot;] }
        } 
      ]
    },
    resolve: {
      extensions: ['*', '.js']
    }
  };
  </code></pre>
  <p>I run <code>npx webpack</code>, it executes without error, but IE does not output anything. I think the reason is because the <code>dist/bundle.js</code> has an arrow function when it gets minified, which IE cannot understand.</p>
  <p>In summary, this works with babel, but not webpack. How can I fix this?</p>
  <p><a href="https://i.stack.imgur.com/J2n1j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J2n1j.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/pgU2C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pgU2C.png" alt="enter image description here" /></a></p>