Add a compile time to webpack dev server and react-scripts

Created by: alexnewmannn

tested by installing react-scripts in a projet, running npm link on react-scripts and react-dev-utils from my fork, and then running npm link react-scripts and npm link react-dev-utils in my project, and running the build and dev task within.

This will show a compile time on each subsequent watch, and on build tasks as discussed in #2546 (closed)

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -143,6 +143,8 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
   // "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', stats => {
+    const compileTime = parseFloat((Math.abs(stats.endTime - stats.startTime) / 1000).toFixed(2));
+
     if (isInteractive) {
       clearConsole();
     }
@@ -153,7 +155,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
     const messages = formatWebpackMessages(stats.toJson({}, true));
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
-      console.log(chalk.green('Compiled successfully!'));
+      console.log(chalk.green('Compiled successfully in ' + compileTime + 's!'));
     }
     if (isSuccessful && (isInteractive || isFirstCompile)) {
       printInstructions(appName, urls, useYarn);
@@ -162,14 +164,14 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
 
     // If errors exist, only show errors.
     if (messages.errors.length) {
-      console.log(chalk.red('Failed to compile.\n'));
+      console.log(chalk.red('Failed to compile after ' + compileTime + 's.\n'));
       console.log(messages.errors.join('\n\n'));
       return;
     }
 
     // Show warnings if no errors were found.
     if (messages.warnings.length) {
-      console.log(chalk.yellow('Compiled with warnings.\n'));
+      console.log(chalk.yellow('Compiled in ' + compileTime + 's with warnings.\n'));
       console.log(messages.warnings.join('\n\n'));
 
       // Teach some ESLint tricks.

packages/react-scripts/scripts/build.js

@@ -58,8 +58,10 @@ measureFileSizesBeforeBuild(paths.appBuild)
   })
   .then(
     ({ stats, previousFileSizes, warnings }) => {
+      const compileTime = parseFloat((Math.abs(stats.endTime - stats.startTime) / 1000).toFixed(2));
+
       if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(chalk.yellow('Compiled in ' + compileTime + 's with warnings.\n'));
         console.log(warnings.join('\n\n'));
         console.log(
           '\nSearch for the ' +
@@ -72,7 +74,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
             ' to the line before.\n'
         );
       } else {
-        console.log(chalk.green('Compiled successfully.\n'));
+        console.log(chalk.green('Compiled successfully in ' + compileTime + 's!'));
       }
 
       console.log('File sizes after gzip:\n');