feat(scripts): make build output style consistent

Use the same header for error and warnings.

Author: swashata

packages/scripts/src/bin/build.ts

@@ -12,6 +12,9 @@ import {
 	resolveCWD,
 	watchEllipsis,
 	wpackLogoSmall,
+	printErrorHeading,
+	printSuccessHeading,
+	printWarningHeading,
 } from './utils';
 
 /**
@@ -53,28 +56,31 @@ export function build(options: ProgramOptions | undefined): void {
 		const builder: Build = new Build(projectConfig, cwd);
 		builder
 			.build()
-			.then(({ status, log }) => {
+			.then(({ status, log, warnings }) => {
 				if (status === 'success') {
 					spinner.succeed(`${wpackLogoSmall} build successful.`);
 				} else {
 					spinner.warn(`${wpackLogoSmall} built with warnings.`);
 				}
-				console.log('');
-				console.log(
-					`${chalk.bgGreenBright(
-						chalk.bold.hex('#000000')(' OUTPUT ')
-					)}`
-				);
-				console.log('');
+				printSuccessHeading('OUTPUT');
 				console.log(log);
 				console.log('');
+				if (status === 'warn' && Array.isArray(warnings)) {
+					printWarningHeading('WARNINGS');
+					warnings.forEach(w => {
+						console.log(w);
+						console.log('');
+					});
+				}
 				endBuildInfo();
 				console.log('');
 				process.exit(0);
 			})
 			.catch(err => {
 				spinner.fail(`${wpackLogoSmall} build failed.`);
+				printErrorHeading('ERROR');
 				console.error(err);
+				console.log('');
 				process.exit(1);
 			});
 	} catch (e) {

packages/scripts/src/bin/utils.ts

@@ -199,6 +199,14 @@ export function printWarningHeading(msg: string = 'WARNING'): void {
 	console.log('');
 }
 
+export function printSuccessHeading(msg: string = 'OUTPUT'): void {
+	console.log('');
+	console.log(
+		`${chalk.bgGreenBright(chalk.bold.hex('#000000')(` ${msg} `))}`
+	);
+	console.log('');
+}
+
 export const bulletSymbol = chalk.magenta(figures.pointer);
 
 export const wpackLink = `${chalk.blue.underline('https://wpack.io')}`;

packages/scripts/src/scripts/Build.ts

@@ -23,6 +23,7 @@ export class Build {
 	public build(): Promise<{
 		status: 'error' | 'warn' | 'success';
 		log: string;
+		warnings?: string[];
 	}> {
 		return new Promise((resolve, reject) => {
 			const config = new CreateWebpackConfig(
@@ -47,6 +48,8 @@ export class Build {
 					modules: false,
 					builtAt: false,
 					timings: false,
+					warnings: false,
+					errors: false,
 				});
 
 				if (!messages.errors.length && !messages.warnings.length) {
@@ -57,11 +60,12 @@ export class Build {
 					});
 				}
 				if (messages.errors.length) {
-					reject(messages.errors.join('\n'));
+					reject(messages.errors.join('\n\n'));
 				}
 				resolve({
 					status: 'warn',
-					log: `${outputLog}\n\n${messages.warnings.join('\n')}`,
+					log: outputLog,
+					warnings: messages.warnings,
 				});
 			});
 		});