From 538eb265b20a2362f73ed9777c8c46eec7176a21 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 14 Mar 2019 17:58:32 +0800 Subject: [PATCH 1/2] Add --debug-webpack option --- lib/core/src/server/build-static.js | 15 +++++-- lib/core/src/server/cli/dev.js | 1 + lib/core/src/server/cli/prod.js | 1 + lib/core/src/server/dev-server.js | 70 ++++++++++++++++------------- lib/core/src/server/logConfig.js | 7 +++ 5 files changed, 59 insertions(+), 35 deletions(-) create mode 100644 lib/core/src/server/logConfig.js diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index cf4ecf8a09bc..ba60a4313196 100644 --- 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); } @@ -179,7 +188,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 index 9dab960414f1..2b441cc6c031 100644 --- 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 index aee35ecc4049..98b3d7bb4535 100644 --- 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 index c2a5cfb557c0..9962d613d89b 100644 --- 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 new file mode 100644 index 000000000000..8288c462c9f2 --- /dev/null +++ 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.log(JSON.stringify(config, null, 2)); +} From 18d243ed97fa7bb7556817459f542e38c4b0f934 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 14 Mar 2019 18:58:53 +0800 Subject: [PATCH 2/2] Use console.dir instead of console.log --- lib/core/src/server/logConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/logConfig.js b/lib/core/src/server/logConfig.js index 8288c462c9f2..815fb5beb3e9 100644 --- a/lib/core/src/server/logConfig.js +++ b/lib/core/src/server/logConfig.js @@ -3,5 +3,5 @@ import chalk from 'chalk'; export function logConfig(caption, config) { console.log(chalk.cyan(caption)); - console.log(JSON.stringify(config, null, 2)); + console.dir(config, { depth: null }); }