title: why do I have to put babel-presets inside .babelrc and webpack.config.js?
body: <p>Ok. I am bootstraping a simple app. I am using flow.js. Presets that I use are babel-preset-2015, babel-preset-react and babel-preset-stage-0. I have to put same presets inside my .babelrc and inside my webpack.config for it all to work. If I for example romove them from webpack.config I get an error 'React is not defined'. If I remove .babelrc and babel-register I get an error because I use import and Flow.js annotation. Why is this happening? If I put presets inside webpack.config I should be able to delete .babelrc or vice verse. This is how my code looks now when it all works (minus some files that are not important for the question).</p>
  
  <p><strong>start-dev.js</strong></p>
  
  <pre><code>require('babel-register')
  require('./src/server/index.js')
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>/* @flow */
  
  import Express from 'express'
  import path from 'path'
  import conf from '../conf/'
  
  const APP_PORT: number = conf.APP_PORT
  const PORT = process.env.PORT || APP_PORT
  
  const app: Express = new Express()
  
  // Middleware
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'ejs')
  app.use(Express.static(path.join(__dirname, '../', 'client', 'dist')))
  
  // Routes
  app.get('*', function (req: Object, res: Object) {
    res.render('index')
  })
  
  app.listen(PORT, function () {
    console.log(`Express server is up on port ${PORT}`)
  })
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  
  ReactDOM.render(
    &lt;h1&gt;First&lt;/h1&gt;,
    document.getElementById('app')
  )
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "scripts": {
      "start-dev": "set \"NODE_ENV=development\" &amp;&amp; babel-node ./start-dev.js",
      "start": "set \"NODE_ENV=development\" &amp;&amp; node ./start-dev.js",
      "flow": "./node_modules/.bin/flow check",
      "standard": "node_modules/.bin/standard --verbose | node_modules/.bin/snazzy"
    },
    "dependencies": {
      "ejs": "^2.5.6",
      "express": "^4.15.2",
      "react": "^15.4.2",
      "react-dom": "^15.4.2"
    },
    "devDependencies": {
      "babel-cli": "^6.24.0",
      "babel-core": "^6.24.0",
      "babel-eslint": "^7.2.1",
      "babel-loader": "^6.4.1",
      "babel-preset-es2015": "^6.24.0",
      "babel-preset-react": "^6.23.0",
      "babel-preset-stage-0": "^6.22.0",
      "babel-register": "^6.24.0",
      "eslint": "^3.18.0",
      "eslint-config-standard": "^7.1.0",
      "eslint-plugin-flowtype": "^2.30.4",
      "eslint-plugin-react": "^6.10.3",
      "flow-bin": "^0.42.0",
      "snazzy": "^6.0.0",
      "standard": "^9.0.2",
      "webpack": "^2.3.2"
    }
  }
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "passPerPreset": true,
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ]
  }
  </code></pre>
  
  <p><strong>webpack.config.babel.js</strong></p>
  
  <pre><code>'use strict'
  
  import path from 'path'
  const publicPath = path.resolve(__dirname, './src/client')
  
  module.exports = {
    devtool: '#source-maps',
    performance: {
      hints: false
    },
    context: publicPath,
    entry: {
      bundle: './app.js'
    },
    output: {
      path: path.join(publicPath, 'dist'),
      filename: '[name].js',
      publicPath: '/dist/'
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              'react',
              'es2015',
              'stage-0'
            ]
          }
        }
      ]
    }
  }
  </code></pre>