webpack loader

一、处理JavaScript

1. babel-loader

webpack1.x 使用babel-loader<=6
webpack2.x使用babel-loader >=7
建议使用yarn安装，也可以使用npm。babel使用的是模块化开发，想要让loader生效，需要同时安装babel-core babel-preset-env

yarn add babel-core babel-preset-env babel-loader

用法非常简单，为了加快loader的处理速度，可以添加exclude，cacheDirectory选项。

module:{
  rules:[
    {
      test:/\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader:'babel-loader?cacheDirectory',
        options:{
          presets: ['env']
        }
      }
  }
]
}

注意，这里的cacheDirectory会缓存JavaScript的编译结果。如果遇到不能刷新代码的情况，可以过来看看是不是走了缓存。
查看babel-loader生成的代码，会发现，babel会在每一个chunk中打包runtime启动代码，这使得代码冗余比较多。此时可以在options中添加新的插件，处理这个情况，比如 babel-plugins-transform-runtime 大概意思就是将runtime代码转移到一个代码中。
最后，babel与babel-loader不是一会儿事儿，webpack2中已经逐步弃用这个写法了。

TODO; translate this page https://github.com/webpack/docs/wiki/list-of-plugins