ES6编译成ES5后，代码为何如此巨大？

Question

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}

我用webpack中的babel-loader编译上面的一段es6代码，编译的后的文件竟然有2万多行！着实把我吓了一跳，是不是我配置有问题？我都不敢用es6了，希望知道的帮忙解答一下，谢谢！

webpack配置文件如下截图：

Answer 1

react-hot大概是因为有这个东西吧，HotModuleReplacementPlugin也会在bundle里加许多代码

Answer 2

1.Iterators + For..Of必须引入Babel polyfill。这个官方文档上有
2.entry里的前两个，都是开发时用的，生产环境要去掉。
3.最后生成的文件里包括css的代码，这个你自己要评估下有多大(抽取css代码可以看一下extract-text-webpack-plugin)
4.webpack 本身会加一下代码来支持模块化
5.从你的截图看，react的代码都被打包进去了，react比较大。