Merge pull request #6082 from storybooks/6081-debug-webpack-option

Add --debug-webpack option
storybookjs · Mar 16, 2019 · d79a371 · d79a371
2 parents 5a9f96e + 18d243e
commit d79a371
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 35 deletions.
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
@@ -8,6 +8,7 @@ import { logger } from '@storybook/node-logger';
 import { getProdCli } from './cli';
 import loadConfig from './config';
 import loadManagerConfig from './manager/manager-config';
+import { logConfig } from './logConfig';
 
 async function compileManager(managerConfig, managerStartTime) {
   logger.info('=> Compiling manager..');
@@ -109,7 +110,7 @@ async function copyAllStaticFiles(staticDir, outputDir) {
   }
 }
 
-async function buildManager(configType, outputDir, configDir) {
+async function buildManager(configType, outputDir, configDir, options) {
   logger.info('=> Building manager..');
   const managerStartTime = process.hrtime();
 
@@ -121,11 +122,15 @@ async function buildManager(configType, outputDir, configDir) {
     corePresets: [require.resolve('./manager/manager-preset.js')],
   });
 
+  if (options.debugWebpack) {
+    logConfig('Manager webpack config', managerConfig);
+  }
+
   return compileManager(managerConfig, managerStartTime);
 }
 
 async function buildPreview(configType, outputDir, packageJson, options) {
-  const { watch } = options;
+  const { watch, debugWebpack } = options;
 
   logger.info('=> Building preview..');
   const previewStartTime = process.hrtime();
@@ -140,6 +145,10 @@ async function buildPreview(configType, outputDir, packageJson, options) {
     ...options,
   });
 
+  if (debugWebpack) {
+    logConfig('Preview webpack config', previewConfig);
+  }
+
   if (watch) {
     return watchPreview(previewConfig);
   }
@@ -176,7 +185,7 @@ export async function buildStaticStandalone(options) {
   logger.info(`=> Copying prebuild dll's..`);
   shelljs.cp('-r', dllPath, path.join(outputDir, 'sb_dll'));
 
-  await buildManager(configType, outputDir, configDir);
+  await buildManager(configType, outputDir, configDir, options);
   await buildPreview(configType, outputDir, packageJson, options);
 
   logger.info(`=> Output directory: ${outputDir}`);

diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
@@ -35,6 +35,7 @@ async function getCLI(packageJson) {
     .option('--ci', "CI mode (skip interactive prompts, don't open browser")
     .option('--quiet', 'Suppress verbose build output')
     .option('--no-dll', 'Do not use dll reference')
+    .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
     .parse(process.argv);
 
   // Workaround the `-h` shorthand conflict.

diff --git a/lib/core/src/server/cli/prod.js b/lib/core/src/server/cli/prod.js
@@ -14,6 +14,7 @@ function getCLI(packageJson) {
     .option('-w, --watch', 'Enable watch mode')
     .option('--quiet', 'Suppress verbose build output')
     .option('--no-dll', 'Do not use dll reference')
+    .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
     .parse(process.argv);
 
   logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));

diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js
@@ -7,7 +7,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 
 import { logger } from '@storybook/node-logger';
 import { getMiddleware } from './utils/middleware';
-
+import { logConfig } from './logConfig';
 import loadConfig from './config';
 import loadManagerConfig from './manager/manager-config';
 
@@ -37,39 +37,41 @@ export default function(options) {
     cache,
     corePresets: [require.resolve('./manager/manager-preset.js')],
     ...options,
-  }).then(
-    config =>
-      new Promise((resolve, reject) => {
-        webpack(config).watch(
-          {
-            aggregateTimeout: 1,
-            ignored: /node_modules/,
-          },
-          (err, stats) => {
-            managerTotalTime = process.hrtime(startTime);
-            if (!resolved && (err || stats.hasErrors())) {
-              const error = new Error('Manager build is broken');
-              error.error = err;
-              error.close = true;
-              error.stats = stats;
-              logger.line();
-              logger.line();
-              try {
-                previewReject(error);
-                previewProcess.close();
-                logger.warn('force closed preview build');
-              } catch (e) {
-                logger.warn('Unable to close preview build!');
-              }
-              logger.line();
-              reject(error);
-            } else {
-              resolve(stats);
+  }).then(config => {
+    if (options.debugWebpack) {
+      logConfig('Manager webpack config', config, logger);
+    }
+    return new Promise((resolve, reject) => {
+      webpack(config).watch(
+        {
+          aggregateTimeout: 1,
+          ignored: /node_modules/,
+        },
+        (err, stats) => {
+          managerTotalTime = process.hrtime(startTime);
+          if (!resolved && (err || stats.hasErrors())) {
+            const error = new Error('Manager build is broken');
+            error.error = err;
+            error.close = true;
+            error.stats = stats;
+            logger.line();
+            logger.line();
+            try {
+              previewReject(error);
+              previewProcess.close();
+              logger.warn('force closed preview build');
+            } catch (e) {
+              logger.warn('Unable to close preview build!');
             }
+            logger.line();
+            reject(error);
+          } else {
+            resolve(stats);
           }
-        );
-      })
-  );
+        }
+      );
+    });
+  });
 
   const previewPromise = options.ignorePreview
     ? new Promise(resolve => resolve())
@@ -81,6 +83,10 @@ export default function(options) {
         overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
         ...options,
       }).then(previewConfig => {
+        if (options.debugWebpack) {
+          logConfig('Preview webpack config', previewConfig, logger);
+        }
+
         // remove the leading '/'
         let { publicPath } = previewConfig.output;
         if (publicPath[0] === '/') {

diff --git a/lib/core/src/server/logConfig.js b/lib/core/src/server/logConfig.js
@@ -0,0 +1,7 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+
+export function logConfig(caption, config) {
+  console.log(chalk.cyan(caption));
+  console.dir(config, { depth: null });
+}