fix: output stats to stdout instead stdout

jest.config.js

@@ -1,9 +1,8 @@
-'use strict';
-
 module.exports = {
   collectCoverage: false,
   coveragePathIgnorePatterns: ['test', '<rootDir>/node_modules'],
   moduleFileExtensions: ['js', 'json'],
   testMatch: ['**/test/**/*.test.js'],
   setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
+  snapshotResolver: './test/helpers/snapshotResolver.js',
 };

package.json

@@ -38,6 +38,7 @@
     "webpack": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "colorette": "^1.2.1",
     "mem": "^8.0.0",
     "memfs": "^3.2.0",
     "mime-types": "^2.1.28",
@@ -56,22 +57,25 @@
     "chokidar": "^3.5.0",
     "connect": "^3.7.0",
     "cross-env": "^7.0.3",
+    "deepmerge": "^4.2.2",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "execa": "^5.0.0",
     "express": "^4.17.1",
     "file-loader": "^6.2.0",
-    "husky": "^5.0.6",
+    "husky": "^4.3.7",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "standard-version": "^9.1.0",
+    "strip-ansi": "^6.0.0",
     "supertest": "^6.0.1",
-    "webpack": "^5.11.1"
+    "webpack": "^5.13.0"
   },
   "keywords": [
     "webpack",

src/utils/setupHooks.js

@@ -1,7 +1,10 @@
+import webpack from 'webpack';
+import colorette from 'colorette';
+
 export default function setupHooks(context) {
   function invalid() {
     if (context.state) {
-      context.logger.info('Compiling...');
+      context.logger.log('Compilation starting...');
     }
 
     // We are now in invalid state
@@ -20,47 +23,71 @@ export default function setupHooks(context) {
 
     // Do the stuff in nextTick, because bundle may be invalidated if a change happened while compiling
     process.nextTick(() => {
-      const { state, compiler, callbacks, logger } = context;
+      const { compiler, logger, state, callbacks } = context;
 
       // Check if still in valid state
       if (!state) {
         return;
       }
 
-      // Print webpack output
-      const printStats = (childCompiler, childStats) => {
-        const statsString = childStats.toString(childCompiler.options.stats);
-        const name = childCompiler.options.name
-          ? `Child "${childCompiler.options.name}": `
-          : '';
-
-        if (statsString.length) {
-          if (childStats.hasErrors()) {
-            logger.error(`${name}${statsString}`);
-          } else if (childStats.hasWarnings()) {
-            logger.warn(`${name}${statsString}`);
-          } else {
-            logger.info(`${name}${statsString}`);
+      logger.log('Compilation finished');
+
+      let statsOptions = compiler.compilers
+        ? {
+            children: compiler.compilers.map((child) =>
+              // eslint-disable-next-line no-undefined
+              child.options ? child.options.stats : undefined
+            ),
           }
-        }
+        : compiler.options
+        ? compiler.options.stats
+        : // eslint-disable-next-line no-undefined
+          undefined;
+
+      const statsForWebpack4 = webpack.Stats && webpack.Stats.presetToOptions;
+
+      if (compiler.compilers) {
+        statsOptions.children = statsOptions.children.map(
+          (childStatsOptions) => {
+            if (statsForWebpack4) {
+              // eslint-disable-next-line no-param-reassign
+              childStatsOptions = webpack.Stats.presetToOptions(
+                childStatsOptions
+              );
+            }
 
-        let message = `${name}Compiled successfully.`;
+            if (typeof childStatsOptions.colors === 'undefined') {
+              // eslint-disable-next-line no-param-reassign
+              childStatsOptions.colors = Boolean(colorette.options.enabled);
+            }
 
-        if (childStats.hasErrors()) {
-          message = `${name}Failed to compile.`;
-        } else if (childStats.hasWarnings()) {
-          message = `${name}Compiled with warnings.`;
+            return childStatsOptions;
+          }
+        );
+      } else if (
+        typeof statsOptions.colors === 'undefined' ||
+        typeof statsOptions === 'string'
+      ) {
+        if (statsForWebpack4) {
+          statsOptions = webpack.Stats.presetToOptions(statsOptions);
         }
 
-        logger.info(message);
-      };
+        statsOptions.colors = Boolean(colorette.options.enabled);
+      }
 
-      if (compiler.compilers) {
-        compiler.compilers.forEach((compilerFromMultiCompileMode, index) => {
-          printStats(compilerFromMultiCompileMode, stats.stats[index]);
-        });
-      } else {
-        printStats(compiler, stats);
+      // TODO webpack@4 doesn't support `{ children: [{ colors: true }, { colors: true }] }` for stats
+      if (compiler.compilers && statsForWebpack4) {
+        statsOptions.colors = statsOptions.children.some(
+          (child) => child.colors
+        );
+      }
+
+      const printedStats = stats.toString(statsOptions);
+
+      // Avoid extra empty line when `stats: 'none'`
+      if (printedStats) {
+        // eslint-disable-next-line no-console
+        console.log(printedStats);
       }
 
       // eslint-disable-next-line no-param-reassign
@@ -73,7 +100,10 @@ export default function setupHooks(context) {
     });
   }
 
-  context.compiler.hooks.watchRun.tap('DevMiddleware', invalid);
-  context.compiler.hooks.invalid.tap('DevMiddleware', invalid);
-  context.compiler.hooks.done.tap('DevMiddleware', done);
+  context.compiler.hooks.watchRun.tap('webpack-dev-middleware', invalid);
+  context.compiler.hooks.invalid.tap('webpack-dev-middleware', invalid);
+  (context.compiler.webpack
+    ? context.compiler.hooks.afterDone
+    : context.compiler.hooks.done
+  ).tap('webpack-dev-middleware', done);
 }