(feat): add webpack validation error logging (facebook#1596)

* (feat): add webpack validation error logging

* Style nit

* Style tweak

* Style nit

Author: johann-sonntagbauer

packages/react-scripts/scripts/build.js

@@ -133,7 +133,16 @@ function printErrors(summary, errors) {
 // Create the production build and print the deployment instructions.
 function build(previousSizeMap) {
   console.log('Creating an optimized production build...');
-  webpack(config).run((err, stats) => {
+
+  var compiler;
+  try {
+    compiler = webpack(config);
+  } catch (err) {
+    printErrors('Failed to compile.', [err]);
+    process.exit(1);
+  }
+
+  compiler.run((err, stats) => {
     if (err) {
       printErrors('Failed to compile.', [err]);
       process.exit(1);

packages/react-scripts/scripts/start.js

@@ -63,7 +63,15 @@ if (isSmokeTest) {
 function setupCompiler(host, port, protocol) {
   // "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);
+  try {
+    compiler = webpack(config, handleCompile);
+  } catch (err) {
+    console.log(chalk.red('Failed to compile.'));
+    console.log();
+    console.log(err.message || err);
+    console.log();
+    process.exit(1);
+  }
 
   // "invalid" event fires when you have changed a file, and Webpack is
   // recompiling a bundle. WebpackDevServer takes care to pause serving the