diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index b93abcdad20..95babd1c526 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -12,196 +12,209 @@ var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
 var paths = require('./paths');
 var env = require('./env');
+var chalk = require('chalk');
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
-module.exports = {
-  // This makes the bundle appear split into separate modules in the devtools.
-  // We don't use source maps here because they can be confusing:
-  // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
-  // You may want 'cheap-module-source-map' instead if you prefer source maps.
-  devtool: 'eval',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-    // Include WebpackDevServer client. It connects to WebpackDevServer via
-    // sockets and waits for recompile notifications. When WebpackDevServer
-    // recompiles, it sends a message to the client by socket. If only CSS
-    // was changed, the app reload just the CSS. Otherwise, it will refresh.
-    // The "?/" bit at the end tells the client to look for the socket at
-    // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
-    // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
-    // The socket server is a part of WebpackDevServer which we are using.
-    // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
-    require.resolve('webpack-dev-server/client') + '?/',
-    // Include Webpack hot module replacement runtime. Webpack is pretty
-    // low-level so we need to put all the pieces together. The runtime listens
-    // to the events received by the client above, and applies updates (such as
-    // new CSS) to the running application.
-    require.resolve('webpack/hot/dev-server'),
-    // We ship a few polyfills by default.
-    require.resolve('./polyfills'),
-    // Finally, this is your app's code:
-    path.join(paths.appSrc, 'index')
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-    // Next line is not used in dev but WebpackDevServer crashes without it:
-    path: paths.appBuild,
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-    // In development, we always serve from the root. This makes config easier.
-    publicPath: '/'
-  },
-  resolve: {
-    // These are the reasonable defaults supported by the Node ecosystem.
-    extensions: ['.js', '.json', ''],
-    alias: {
-      // This `alias` section can be safely removed after ejection.
-      // We do this because `babel-runtime` may be inside `react-scripts`,
-      // so when `babel-plugin-transform-runtime` imports it, it will not be
-      // available to the app directly. This is a temporary solution that lets
-      // us ship support for generators. However it is far from ideal, and
-      // if we don't have a good solution, we should just make `babel-runtime`
-      // a dependency in generated projects.
-      // See https://github.com/facebookincubator/create-react-app/issues/255
-      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
-      'react-native': 'react-native-web'
-    }
-  },
-  // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
-  // directory of `react-scripts` itself rather than the project directory.
-  // You can remove this after ejecting.
-  resolveLoader: {
-    root: paths.ownNodeModules,
-    moduleTemplates: ['*-loader']
-  },
-  module: {
-    // First, run the linter.
-    // It's important to do this before Babel processes the JS.
-    preLoaders: [
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: paths.appSrc,
-      }
+module.exports = function(serverPort) {
+  return {
+    // This makes the bundle appear split into separate modules in the devtools.
+    // We don't use source maps here because they can be confusing:
+    // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
+    // You may want 'cheap-module-source-map' instead if you prefer source maps.
+    devtool: 'eval',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    // The first two entry points enable "hot" CSS and auto-refreshes for JS.
+    entry: [
+      // Include WebpackDevServer client. It connects to WebpackDevServer via
+      // sockets and waits for recompile notifications. When WebpackDevServer
+      // recompiles, it sends a message to the client by socket. If only CSS
+      // was changed, the app reload just the CSS. Otherwise, it will refresh.
+      // The "?/" bit at the end tells the client to look for the socket at
+      // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
+      // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
+      // The socket server is a part of WebpackDevServer which we are using.
+      // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
+      require.resolve('webpack-dev-server/client') + '?/',
+      // Include Webpack hot module replacement runtime. Webpack is pretty
+      // low-level so we need to put all the pieces together. The runtime listens
+      // to the events received by the client above, and applies updates (such as
+      // new CSS) to the running application.
+      require.resolve('webpack/hot/dev-server'),
+      // We ship a few polyfills by default.
+      require.resolve('./polyfills'),
+      // Finally, this is your app's code:
+      path.join(paths.appSrc, 'index')
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
     ],
-    loaders: [
-      // Process JS with Babel.
-      {
-        test: /\.js$/,
-        include: paths.appSrc,
-        loader: 'babel',
-        query: require('./babel.dev')
-      },
-      // "postcss" loader applies autoprefixer to our CSS.
-      // "css" loader resolves paths in CSS and adds assets as dependencies.
-      // "style" loader turns CSS into JS modules that inject <style> tags.
-      // In production, we use a plugin to extract that CSS to a file, but
-      // in development "style" loader enables hot editing of CSS.
-      {
-        test: /\.css$/,
-        include: [paths.appSrc, paths.appNodeModules],
-        loader: 'style!css!postcss'
-      },
-      // JSON is not enabled by default in Webpack but both Node and Browserify
-      // allow it implicitly so we also enable it.
-      {
-        test: /\.json$/,
-        include: [paths.appSrc, paths.appNodeModules],
-        loader: 'json'
-      },
-      // "file" loader makes sure those assets get served by WebpackDevServer.
-      // When you `import` an asset, you get its (virtual) filename.
-      // In production, they would get copied to the `build` folder.
-      {
-        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [paths.appSrc, paths.appNodeModules],
-        exclude: /\/favicon.ico$/,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // A special case for favicon.ico to place it into build root directory.
-      {
-        test: /\/favicon.ico$/,
-        include: [paths.appSrc],
-        loader: 'file',
-        query: {
-          name: 'favicon.ico?[hash:8]'
+    output: {
+      // Next line is not used in dev but WebpackDevServer crashes without it:
+      path: paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: true,
+      // This does not produce a real file. It's just the virtual path that is
+      // served by WebpackDevServer in development. This is the JS bundle
+      // containing code from all our entry points, and the Webpack runtime.
+      filename: 'static/js/bundle.js',
+      // In development, we always serve from the root. This makes config easier.
+      publicPath: '/'
+    },
+    resolve: {
+      // These are the reasonable defaults supported by the Node ecosystem.
+      extensions: ['.js', '.json', ''],
+      alias: {
+        // This `alias` section can be safely removed after ejection.
+        // We do this because `babel-runtime` may be inside `react-scripts`,
+        // so when `babel-plugin-transform-runtime` imports it, it will not be
+        // available to the app directly. This is a temporary solution that lets
+        // us ship support for generators. However it is far from ideal, and
+        // if we don't have a good solution, we should just make `babel-runtime`
+        // a dependency in generated projects.
+        // See https://github.com/facebookincubator/create-react-app/issues/255
+        'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
+        'react-native': 'react-native-web'
+      }
+    },
+    // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
+    // directory of `react-scripts` itself rather than the project directory.
+    // You can remove this after ejecting.
+    resolveLoader: {
+      root: paths.ownNodeModules,
+      moduleTemplates: ['*-loader']
+    },
+    module: {
+      // First, run the linter.
+      // It's important to do this before Babel processes the JS.
+      preLoaders: [
+        {
+          test: /\.js$/,
+          loader: 'eslint',
+          include: paths.appSrc,
         }
-      },
-      // "url" loader works just like "file" loader but it also embeds
-      // assets smaller than specified size as data URLs to avoid requests.
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        include: [paths.appSrc, paths.appNodeModules],
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]'
+      ],
+      loaders: [
+        // Process JS with Babel.
+        {
+          test: /\.js$/,
+          include: paths.appSrc,
+          loader: 'babel',
+          query: require('./babel.dev')
+        },
+        // "postcss" loader applies autoprefixer to our CSS.
+        // "css" loader resolves paths in CSS and adds assets as dependencies.
+        // "style" loader turns CSS into JS modules that inject <style> tags.
+        // In production, we use a plugin to extract that CSS to a file, but
+        // in development "style" loader enables hot editing of CSS.
+        {
+          test: /\.css$/,
+          include: [paths.appSrc, paths.appNodeModules],
+          loader: 'style!css!postcss'
+        },
+        // JSON is not enabled by default in Webpack but both Node and Browserify
+        // allow it implicitly so we also enable it.
+        {
+          test: /\.json$/,
+          include: [paths.appSrc, paths.appNodeModules],
+          loader: 'json'
+        },
+        // "file" loader makes sure those assets get served by WebpackDevServer.
+        // When you `import` an asset, you get its (virtual) filename.
+        // In production, they would get copied to the `build` folder.
+        {
+          test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+          include: [paths.appSrc, paths.appNodeModules],
+          exclude: /\/favicon.ico$/,
+          loader: 'file',
+          query: {
+            name: 'static/media/[name].[hash:8].[ext]'
+          }
+        },
+        // A special case for favicon.ico to place it into build root directory.
+        {
+          test: /\/favicon.ico$/,
+          include: [paths.appSrc],
+          loader: 'file',
+          query: {
+            name: 'favicon.ico?[hash:8]'
+          }
+        },
+        // "url" loader works just like "file" loader but it also embeds
+        // assets smaller than specified size as data URLs to avoid requests.
+        {
+          test: /\.(mp4|webm)(\?.*)?$/,
+          include: [paths.appSrc, paths.appNodeModules],
+          loader: 'url',
+          query: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]'
+          }
+        },
+        // "html" loader is used to process template page (index.html) to resolve
+        // resources linked with <link href="./relative/path"> HTML tags.
+        {
+          test: /\.html$/,
+          loader: 'html',
+          query: {
+            attrs: ['link:href'],
+          }
         }
-      },
-      // "html" loader is used to process template page (index.html) to resolve
-      // resources linked with <link href="./relative/path"> HTML tags.
-      {
-        test: /\.html$/,
-        loader: 'html',
-        query: {
-          attrs: ['link:href'],
+      ]
+    },
+    // Point ESLint to our predefined config.
+    eslint: {
+      configFile: path.join(__dirname, 'eslint.js'),
+      useEslintrc: false
+    },
+    // We use PostCSS for autoprefixing only.
+    postcss: function() {
+      return [
+        autoprefixer({
+          browsers: [
+            '>1%',
+            'last 4 versions',
+            'Firefox ESR',
+            'not ie < 9', // React doesn't support IE8 anyway
+          ]
+        }),
+      ];
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: paths.appHtml,
+      }),
+      new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: ['You application is accessible at ' + chalk.cyan('http://localhost:' + serverPort)],
+          notes: [
+            'Note that the development build is not optimized.',
+            'To create a production build, use ' + chalk.cyan('npm run build') + '.'
+          ]
         }
-      }
-    ]
-  },
-  // Point ESLint to our predefined config.
-  eslint: {
-    configFile: path.join(__dirname, 'eslint.js'),
-    useEslintrc: false
-  },
-  // We use PostCSS for autoprefixing only.
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9', // React doesn't support IE8 anyway
-        ]
       }),
-    ];
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
-    new webpack.DefinePlugin(env),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebookincubator/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
-  ]
-};
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
+      new webpack.DefinePlugin(env),
+      // This is necessary to emit hot updates (currently CSS only):
+      new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebookincubator/create-react-app/issues/240
+      new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebookincubator/create-react-app/issues/186
+      new WatchMissingNodeModulesPlugin(paths.appNodeModules)
+    ]
+  };
+}
diff --git a/package.json b/package.json
index 1694ded2b12..345296a94c7 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "filesize": "3.3.0",
+    "friendly-errors-webpack-plugin": "1.0.2",
     "fs-extra": "0.30.0",
     "gzip-size": "3.0.0",
     "html-loader": "0.4.3",
diff --git a/scripts/start.js b/scripts/start.js
index aa68ab40ff3..c4b435a56eb 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -19,12 +19,11 @@ var execSync = require('child_process').execSync;
 var opn = require('opn');
 var detect = require('detect-port');
 var prompt = require('./utils/prompt');
-var config = require('../config/webpack.config.dev');
+var createConfig = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
 
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
-var compiler;
 
 // TODO: hide this behind a flag and eliminate dead code on eject.
 // This shouldn't be exposed to the user.
@@ -40,114 +39,12 @@ if (isSmokeTest) {
   };
 }
 
-// Some custom utilities to prettify Webpack output.
-// This is a little hacky.
-// It would be easier if webpack provided a rich error object.
-var friendlySyntaxErrorLabel = 'Syntax error:';
-function isLikelyASyntaxError(message) {
-  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
-}
-function formatMessage(message) {
-  return message
-    // Make some common errors shorter:
-    .replace(
-      // Babel syntax error
-      'Module build failed: SyntaxError:',
-      friendlySyntaxErrorLabel
-    )
-    .replace(
-      // Webpack file not found error
-      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
-      'Module not found:'
-    )
-    // Internal stacks are generally useless so we strip them
-    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
-    // Webpack loader names obscure CSS filenames
-    .replace('./~/css-loader!./~/postcss-loader!', '');
-}
-
 function clearConsole() {
   // This seems to work best on Windows and other systems.
   // The intention is to clear the output so you can focus on most recent build.
   process.stdout.write('\x1bc');
 }
 
-function setupCompiler(port) {
-  // "Compiler" is a low-level interface to Webpack.
-  // It lets us listen to some events and provide our own custom messages.
-  compiler = webpack(config, handleCompile);
-
-  // "invalid" event fires when you have changed a file, and Webpack is
-  // recompiling a bundle. WebpackDevServer takes care to pause serving the
-  // bundle, so if you refresh, it'll wait instead of serving the old one.
-  // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
-  compiler.plugin('invalid', function() {
-    clearConsole();
-    console.log('Compiling...');
-  });
-
-  // "done" event fires when Webpack has finished recompiling the bundle.
-  // Whether or not you have warnings or errors, you will get this event.
-  compiler.plugin('done', function(stats) {
-    clearConsole();
-    var hasErrors = stats.hasErrors();
-    var hasWarnings = stats.hasWarnings();
-    if (!hasErrors && !hasWarnings) {
-      console.log(chalk.green('Compiled successfully!'));
-      console.log();
-      console.log('The app is running at:');
-      console.log();
-      console.log('  ' + chalk.cyan('http://localhost:' + port + '/'));
-      console.log();
-      console.log('Note that the development build is not optimized.');
-      console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
-      console.log();
-      return;
-    }
-
-    // We have switched off the default Webpack output in WebpackDevServer
-    // options so we are going to "massage" the warnings and errors and present
-    // them in a readable focused way.
-    // We use stats.toJson({}, true) to make output more compact and readable:
-    // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
-    var json = stats.toJson({}, true);
-    var formattedErrors = json.errors.map(message =>
-      'Error in ' + formatMessage(message)
-    );
-    var formattedWarnings = json.warnings.map(message =>
-      'Warning in ' + formatMessage(message)
-    );
-    if (hasErrors) {
-      console.log(chalk.red('Failed to compile.'));
-      console.log();
-      if (formattedErrors.some(isLikelyASyntaxError)) {
-        // If there are any syntax errors, show just them.
-        // This prevents a confusing ESLint parsing error
-        // preceding a much more useful Babel syntax error.
-        formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
-      }
-      formattedErrors.forEach(message => {
-        console.log(message);
-        console.log();
-      });
-      // If errors exist, ignore warnings.
-      return;
-    }
-    if (hasWarnings) {
-      console.log(chalk.yellow('Compiled with warnings.'));
-      console.log();
-      formattedWarnings.forEach(message => {
-        console.log(message);
-        console.log();
-      });
-      // Teach some ESLint tricks.
-      console.log('You may use special comments to disable some warnings.');
-      console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
-      console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
-    }
-  });
-}
-
 function openBrowser(port) {
   if (process.platform === 'darwin') {
     try {
@@ -217,7 +114,7 @@ function addMiddleware(devServer) {
   devServer.use(devServer.middleware);
 }
 
-function runDevServer(port) {
+function runDevServer(compiler, config, port) {
   var devServer = new WebpackDevServer(compiler, {
     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
     // for the WebpackDevServer client so it can learn when the files were
@@ -255,8 +152,9 @@ function runDevServer(port) {
 }
 
 function run(port) {
-  setupCompiler(port);
-  runDevServer(port);
+  var config = createConfig(port);
+  var compiler = webpack(config, handleCompile);
+  runDevServer(compiler, config, port);
 }
 
 // We attempt to use the default port but if it is busy, we offer the user to