title: JavaScript - babel-preset-env not transpiling arrow functions for IE11
body: <p>I'm having a hard time trying to configure Babel to transpile code that IE11 can understand, specifically arrow functions. Running <code>npx webpack --mode=development</code> with my configuration doesn't convert the arrow functions in my code: in the <code>eval()</code> statement in the generated code, I can see that all the instances have gone unconverted.</p>
  
  <p>Unlike in the console output quoted in <a href="https://stackoverflow.com/questions/49954618/babel-not-transpiling-arrow-functions-webpack">this question</a>, there's no mention in mine of "Using targets" or "Using presets". Whether that's something to do with using <code>npx webpack</code> rather than <code>npm run build</code> I don't know.</p>
  
  <p>Here's the Babel part of my <code>package.json</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    // name, version etc. snipped
    "devDependencies": {
      "@babel/core": "^7.1.2",
      "@babel/plugin-transform-async-to-generator": "^7.1.0",
      "@babel/plugin-transform-es2015-arrow-functions": "^6.22.0",
      "@babel/plugin-transform-es2015-modules-commonjs": "^6.26.2",
      "@babel/preset-env": "^7.1.0",
      "ajv": "^6.5.4",
      "copy-webpack-plugin": "^4.5.2",
      "eslint-plugin-jest": "^21.24.1",
      "jest": "^23.6.0",
      "jest-dom": "^2.0.4",
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "babel": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "ie": "11"
            }
          }
        ]
      ],
      "env": {
        "development": {
          "plugins": [
            "transform-es2015-arrow-functions",
            "transform-es2015-modules-commonjs"
          ]
        },
        "test": {
          "plugins": [
            "transform-es2015-arrow-functions",
            "transform-es2015-modules-commonjs"
          ]
        }
      }
    }
  }
  </code></pre>
  
  <p>My <code>webpack.config.js</code> looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>const CopyWebpackPlugin = require("copy-webpack-plugin");
  const path = require("path");
  
  module.exports = {
      entry: "./src/thing.js",
      optimization: {
          minimize: false
      },
      output: {
          filename: "thing.js",
          path: path.resolve(__dirname, "dist")
      },
      plugins: [
          new CopyWebpackPlugin([
              // snipped
          ])
      ]
  };
  </code></pre>
  
  <p>I arrived at this point from reading other questions here about Babel configurations, and the <a href="https://babeljs.io/docs/en/babel-preset-env#targets" rel="noreferrer">babel-preset-env docs</a> and also the very skimpy <a href="https://babeljs.io/docs/en/babel-plugin-transform-es2015-arrow-functions" rel="noreferrer">babel-plugin-transform-es2015-arrow-functions docs</a>. The answers to <a href="https://stackoverflow.com/questions/51669441/babel-preset-env-not-transpiling-arrow-functions-using-webpack">this very similar question</a> (no accepted answer) don't mention that plugin at all, and one suggests using a polyfill, which seems to involve loading a library in your actual code rather than at this stage?</p>
  
  <p>I'm very new to working with Webpack in general and don't understand what the difference is between <code>"env"</code> (which gets mentioned in a lot of questions) and <code>"@babel/preset-env"</code>. Or really what the former implies in general; if you click on "env" in the docs navigation, it takes you to the page for <code>@babel/preset-env</code>.</p>
  
  <p>What am I doing wrong?</p>