Eject .babelrc instead of separate configs (#705)

Fixes #410, #674

packages/react-scripts/config/webpack.config.dev.js

@@ -12,6 +12,7 @@
 var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
+var findCacheDir = require('find-cache-dir');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin');
@@ -118,7 +119,19 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.dev')
+        query: {
+          // @remove-on-eject-begin
+          babelrc: false,
+          presets: [require.resolve('babel-preset-react-app')],
+          // @remove-on-eject-end
+          // This is a feature of `babel-loader` for webpack (not Babel itself).
+          // It enables caching results in ./node_modules/.cache/react-scripts/
+          // directory for faster rebuilds. We use findCacheDir() because of:
+          // https://github.com/facebookincubator/create-react-app/issues/483
+          cacheDirectory: findCacheDir({
+            name: 'react-scripts'
+          })
+        }
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.