(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