Build System

Production build functionality with webpack compilation, asset optimization, and comprehensive error handling for deployment-ready applications.

Capabilities

Build Function

Execute production build with webpack compilation and comprehensive error handling.

/**
 * Execute production build with webpack
 * @param opts - Build configuration options
 */
function build(opts: {
  webpackConfig: object | object[];
  cwd?: string;
  onSuccess?: (result: { stats: object }) => void;
  onFail?: (error: { err?: Error; stats?: object; rawStats?: object }) => void;
}): void;

Parameters:

• webpackConfig (object | object[]): Webpack configuration object or array of configurations
• cwd (string, optional): Current working directory (defaults to process.cwd())
• onSuccess (function, optional): Callback executed on successful build
• onFail (function, optional): Callback executed on build failure

Usage Examples:

const build = require('af-webpack/build');

// Basic production build
build({
  webpackConfig: {
    entry: './src/index.js',
    output: {
      path: './dist',
      filename: 'bundle.js'
    }
  }
});

// Build with callbacks
build({
  webpackConfig,
  cwd: process.cwd(),
  onSuccess: ({ stats }) => {
    console.log('Build completed successfully');
    console.log('Assets:', stats.toJson().assets);
  },
  onFail: ({ err, stats, rawStats }) => {
    console.error('Build failed:', err);
    if (stats && stats.hasErrors()) {
      console.error('Compilation errors:', stats.compilation.errors);
    }
  }
});

// Multi-configuration build
build({
  webpackConfig: [
    // Client configuration
    {
      entry: './src/client.js',
      output: { path: './dist/client' }
    },
    // Server configuration  
    {
      entry: './src/server.js',
      output: { path: './dist/server' }
    }
  ]
});

Build Features

The build system includes:

• Output Directory Cleaning: Automatically cleans output directory before build (controlled by CLEAR_OUTPUT environment variable)
• File Size Analysis: Displays gzipped file sizes after build completion using react-dev-utils
• Error Reporting: Comprehensive error handling with structured error information
• Multi-Configuration Support: Supports building multiple webpack configurations simultaneously
• Watch Mode Support: Handles webpack watch mode for continuous builds

Error Handling

Build errors are provided to the onFail callback with detailed information:

interface BuildError {
  err?: Error;           // Primary error object
  stats?: object;        // Webpack stats for single config
  rawStats?: object;     // Raw webpack stats (useful for multi-config)
}

Environment Variables

• CLEAR_OUTPUT: Set to none to disable output directory cleaning
• UMI_TEST: Prevents process exit on build failure during testing

File Size Reporting

The build system automatically displays file sizes after successful compilation:

• Warns for bundles exceeding 512KB gzipped
• Warns for chunks exceeding 1MB gzipped
• Shows all asset sizes in a formatted table