babel-preset-env not transpiling arrow functions using webpack

Question

I'm using babel with webpack, I'm trying to make arrow functions work with Internet Explorer, but I can't get it working.

This is my package.json dev dependencies:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.0"
  }

and this is my webpack.config.js:

module.exports = {
  entry: ['./chat.js'],
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "chat.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }  
};

I'm using the plugins with .babelrc :

{
  "presets": ["env"],
  "plugins": ["transform-class-properties"]
}

I don't know what I'm doing wrong or if I'm missing something but I get the following syntax error on Internet Explorer:

DF.fn = () => {
        // Content
};

Answer 1

If you are using Babel 7, the behaviour of .babelrc has changed .

My advice is to drop .babelrc and put the config inside your webpack config.

Additionally you will need to either remove exclude: /node_modules/ from your config config, or add in some conditions for not excluding any libraries that use browser incompatible code (eg, arrow functions if you want to use IE).

Personally I removed the exclude altogether and noticed no degredation in speed or size.

Answer 2

You have to specify the target browsers for your build. Based on that babel-preset-env decides which transforms need to be applied. Here's docs and example of config

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

And here are all possible ways to specify the browsers set.