Webpack中的query: { presets: ['es2015','react'] }

问题

最近检查配置的时候，发现在webpack中有一段配置

  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015','react']
      }
    }]
  }

好奇 query这一项的presets起什么作用。
结果以 webpack、query、module 为关键字都没找到答案。

最后知道这是babel-loader的配置。

答案

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

参考文档：

关于Babel配置项的这点事
Babel 入门教程