### Install WebpackBar

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Installation commands for various package managers.

```sh
# ✨ Auto-detect
npx nypm install webpackbar

# npm
npm install webpackbar

# yarn
yarn add webpackbar

# pnpm
pnpm install webpackbar

# bun
bun install webpackbar

# deno
deno install webpackbar
```

--------------------------------

### Installation

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Install webpackbar using your preferred package manager.

```APIDOC
## Installation

To begin, you'll need to install `webpackbar`:

```sh
# ✨ Auto-detect
npx nypm install webpackbar

# npm
npm install webpackbar

# yarn
yarn add webpackbar

# pnpm
pnpm install webpackbar

# bun
bun install webpackbar

# deno
deno install webpackbar
```
```

--------------------------------

### Configure Built-in Reporters (Default)

Source: https://context7.com/unjs/webpackbar/llms.txt

Webpackbar's default behavior uses the fancy reporter in terminals and the basic reporter in CI environments. This configuration shows the default setup.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

// Default behavior: fancy reporter in terminals, basic in CI
export default {
  plugins: [
    new WebpackBar({
      name: "default",
    }),
  ],
};
```

--------------------------------

### Define a Custom Reporter Class

Source: https://context7.com/unjs/webpackbar/llms.txt

Implement the CustomReporter class to handle specific build events like start, change, progress, and done. This allows for tailored logging and progress updates.

```javascript
// custom-reporter.js
class CustomReporter {
  // Called when (re)compile is started
  start(context) {
    console.log(`[${context.state.name}] Build started...`);
  }

  // Called when a file changed in watch mode
  change(context, { shortPath }) {
    console.log(`[${context.state.name}] File changed: ${shortPath}`);
  }

  // Called after each progress update
  progress(context) {
    const { progress, message, name } = context.state;
    console.log(`[${name}] ${progress}% - ${message}`);
  }

  // Called when compile finished
  done(context, { stats }) {
    const { name, message, hasErrors } = context.state;
    if (hasErrors) {
      console.error(`[${name}] Build failed: ${message}`);
    } else {
      console.log(`[${name}] ${message}`);
    }
  }

  // Called when _all_ compiles finished (useful for multi-config builds)
  allDone(context) {
    console.log("All builds completed!");
  }

  // Called before allDone
  beforeAllDone(context) {}

  // Called after allDone
  afterAllDone(context) {}
}

export default CustomReporter;
```

--------------------------------

### Disable All Built-in Reporters

Source: https://context7.com/unjs/webpackbar/llms.txt

Configure Webpackbar to use only custom reporters by disabling both the 'fancy' and 'basic' built-in reporters. A simple custom 'done' reporter is shown as an example.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

// Disable all built-in reporters (use only custom)
export const customOnlyConfig = {
  plugins: [
    new WebpackBar({
      name: "custom",
      fancy: false,
      basic: false,
      reporter: {
        done(context) {
          console.log(`Build complete: ${context.state.message}`);
        },
      },
    }),
  ],
};
```

--------------------------------

### Options

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Configuration options for Webpackbar.

```APIDOC
## Options

### `name`

- Default: `webpack`

Name.

### `color`

- Default: `green`

Primary color (can be HEX like `#xxyyzz` or a web color like `green`).

### `profile`

- Default: `false`

Enable profiler.

### `fancy`

- Default: `true` when not in CI or testing mode.

Enable bars reporter.

### `basic`

- Default: `true` when running in minimal environments.

Enable a simple log reporter (only start and end).

### `reporter`

Register a custom reporter.

### `reporters`

- Default: `[]`

Register an Array of your custom reporters. (Same as `reporter` but array)
```

--------------------------------

### Enable Build Profiler

Source: https://context7.com/unjs/webpackbar/llms.txt

The profile option enables detailed performance analysis showing time spent per loader and file type.

```APIDOC
## Enable Build Profiler

The profile option enables detailed performance analysis showing time spent per loader and file type.

### Method

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

export default {
  mode: "production",
  entry: "./src/index.js",
  plugins: [
    new WebpackBar({
      name: "production",
      color: "green",
      profile: true, // Enables profiling output after build
    }),
  ],
};

// Output after build:
// Profile results for Production
//
// Loaders:
// babel-loader    | 1.23s | 45 modules
// css-loader      | 0.45s | 12 modules
//
// Extensions:
// js              | 1.23s | 45 files
// css             | 0.45s | 12 files
```
```

--------------------------------

### Basic Webpack Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

Add WebpackBar as a plugin to display progress bars during Webpack builds. Ensure WebpackBar is imported from 'webpackbar'.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: "./dist",
  },
  plugins: [
    new WebpackBar({
      name: "client",
      color: "green",
    }),
  ],
};
```

--------------------------------

### Basic Webpack Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

Integrate WebpackBar into your Webpack configuration to display progress bars during builds.

```APIDOC
## Basic Webpack Configuration

Add WebpackBar as a plugin to display progress bars during Webpack builds.

### Method

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: "./dist",
  },
  plugins: [
    new WebpackBar({
      name: "client",
      color: "green",
    }),
  ],
};
```
```

--------------------------------

### WebpackBarOptions

Source: https://context7.com/unjs/webpackbar/llms.txt

Configuration options for customizing the progress bar appearance and behavior.

```APIDOC
## WebpackBarOptions

Configuration options for customizing the progress bar appearance and behavior.

### Parameters

#### Request Body

- **name** (string) - Optional - Display name shown in the progress bar (default: 'webpack')
- **color** (string) - Optional - Color of the progress bar - can be HEX (#00ff00) or web color (default: 'green')
- **profile** (boolean) - Optional - Enable build profiler to analyze loader performance (default: false)
- **fancy** (boolean) - Optional - Enable fancy progress bar reporter (default: true when not in CI)
- **basic** (boolean) - Optional - Enable basic log reporter for minimal environments (default: true in CI)
- **reporter** (Reporter | string | [Reporter | string, any?]) - Optional - Register a single custom reporter
- **reporters** (Array<Reporter | string | [Reporter | string, any?]>) - Optional - Register multiple custom reporters (default: ['fancy'] or ['basic'])
```

--------------------------------

### Enable Build Profiler

Source: https://context7.com/unjs/webpackbar/llms.txt

Set the 'profile' option to true in WebpackBar configuration to enable detailed performance analysis, showing time spent per loader and file type after the build.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

export default {
  mode: "production",
  entry: "./src/index.js",
  plugins: [
    new WebpackBar({
      name: "production",
      color: "green",
      profile: true, // Enables profiling output after build
    }),
  ],
};

// Output after build:
// Profile results for Production
//
// Loaders:
// babel-loader    | 1.23s | 45 modules
// css-loader      | 0.45s | 12 modules
//
// Extensions:
// js              | 1.23s | 45 files
// css             | 0.45s | 12 files

```

--------------------------------

### Rspack Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

Use the Rspack-compatible version of WebpackBar by importing from 'webpackbar/rspack'.

```APIDOC
## Rspack Configuration

For Rspack projects, import from "webpackbar/rspack" to use the Rspack-compatible version.

### Method

```javascript
// rspack.config.mjs
import WebpackBar from "webpackbar/rspack";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: "./dist",
  },
  plugins: [
    new WebpackBar({
      name: "rspack-build",
      color: "cyan",
    }),
  ],
};
```
```

--------------------------------

### Registering Reporters with Options

Source: https://context7.com/unjs/webpackbar/llms.txt

Use array syntax to pass configuration objects to custom reporter classes within the WebpackBar plugin configuration.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

// Custom reporter that accepts options
class VerboseReporter {
  constructor(options = {}) {
    this.prefix = options.prefix || "[Build]";
    this.showDetails = options.showDetails ?? true;
  }

  progress(context) {
    const { progress, message, details } = context.state;
    let output = `${this.prefix} ${progress}% - ${message}`;
    if (this.showDetails && details.length > 0) {
      output += ` (${details.join(", ")})`;
    }
    console.log(output);
  }

  done(context) {
    console.log(`${this.prefix} ${context.state.message}`);
  }
}

export default {
  plugins: [
    new WebpackBar({
      name: "app",
      fancy: false,
      basic: false,
      reporters: [
        // Reporter with options using array syntax
        [VerboseReporter, { prefix: "[MyApp]", showDetails: true }],
        // Or use string for built-in reporters
        "profile",
      ],
    }),
  ],
};
```

--------------------------------

### Custom Reporters

Source: https://github.com/unjs/webpackbar/blob/main/README.md

How to create and use custom reporters with Webpackbar.

```APIDOC
## Custom Reporters

Webpackbar comes with a fancy progress-bar out of the box.
But you may want to show progress somewhere else or provide your own.

For this purpose, you can provide one or more extra reporters using `reporter` and `reporters` options.

**NOTE:** If you plan to provide your own reporter, don't forget to setting `fancy` and `basic` options to false to prevent conflicts.

A reporter should be instance of a class or plain object and functions for special hooks. It is not necessary to implement all functions, webpackbar only calls those that exists.

**Simple logger:**

```js
const logger = {
  start(context) {
    // Called when (re)compile is started
  },
  change(context) {
    // Called when a file changed on watch mode
  },
  update(context) {
    // Called after each progress update
  },
  done(context) {
    // Called when compile finished
  },
  progress(context) {
    // Called when build progress updated
  },
  allDone(context) {
    // Called when _all_ compiles finished
  },
  beforeAllDone(context) {},
  afterAllDone(context) {},
};
```

`context` is the reference to the plugin. You can use `context.state` to access status.

**Schema of `context.state`:**

```js
{
  start,
  progress,
  message,
  details,
  request,
  hasErrors;
}
```
```

--------------------------------

### Implement a Custom Reporter

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Define a custom reporter object with hook functions to handle build lifecycle events.

```js
const logger = {
  start(context) {
    // Called when (re)compile is started
  },
  change(context) {
    // Called when a file changed on watch mode
  },
  update(context) {
    // Called after each progress update
  },
  done(context) {
    // Called when compile finished
  },
  progress(context) {
    // Called when build progress updated
  },
  allDone(context) {
    // Called when _all_ compiles finished
  },
  beforeAllDone(context) {},
  afterAllDone(context) {},
};
```

--------------------------------

### Rspack Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

For Rspack projects, import WebpackBar from 'webpackbar/rspack' to use the Rspack-compatible version. Configure name and color as needed.

```javascript
// rspack.config.mjs
import WebpackBar from "webpackbar/rspack";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: "./dist",
  },
  plugins: [
    new WebpackBar({
      name: "rspack-build",
      color: "cyan",
    }),
  ],
};
```

--------------------------------

### Force Basic Reporter Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

Force the use of the basic reporter for simple log output, disabling the fancy visual bars. This is useful for environments where visual output is not desired or supported.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

// Force basic reporter (simple logs)
export const basicConfig = {
  plugins: [
    new WebpackBar({
      name: "basic",
      fancy: false,
      basic: true,
    }),
  ],
};
```

--------------------------------

### Webpack Configuration

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Add Webpackbar as a plugin to your webpack configuration.

```APIDOC
## Webpack Configuration

Then add the reporter as a plugin to your webpack config (make sure `webpack` peer dependency is installed).

**`webpack.config.mjs`**

```js
import WebpackBar from "webpackbar";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};
```
```

--------------------------------

### Multiple Concurrent Builds (SSR)

Source: https://context7.com/unjs/webpackbar/llms.txt

Configure multiple WebpackBar instances for parallel builds, such as client and server bundles in SSR applications.

```APIDOC
## Multiple Concurrent Builds (SSR)

Configure multiple WebpackBar instances for parallel builds like client and server bundles in SSR applications.

### Method

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

const clientConfig = {
  mode: "production",
  entry: "./src/client.js",
  output: {
    filename: "client.js",
    path: "./dist/client",
  },
  plugins: [
    new WebpackBar({
      name: "client",
      color: "green",
    }),
  ],
};

const serverConfig = {
  mode: "production",
  entry: "./src/server.js",
  target: "node",
  output: {
    filename: "server.js",
    path: "./dist/server",
  },
  plugins: [
    new WebpackBar({
      name: "server",
      color: "orange",
    }),
  ],
};

export default [clientConfig, serverConfig];
```
```

--------------------------------

### Rspack Configuration

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Add Webpackbar as a plugin to your Rspack configuration.

```APIDOC
## Rspack Configuration

For using with [Rspack](https://rspack.dev/), you can use `webpackbar/rspack` (make sure `@rspack/core` peer dependency is installed).

**`rspack.config.mjs`**:

```js
import WebpackBar from "webpackbar/rspack";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};
```
```

--------------------------------

### WebpackBarOptions Interface

Source: https://context7.com/unjs/webpackbar/llms.txt

TypeScript interface defining configuration options for WebpackBar. Options include name, color, profile, fancy, basic, reporter, and reporters.

```typescript
interface WebpackBarOptions {
  // Display name shown in the progress bar (default: 'webpack')
  name?: string;

  // Color of the progress bar - can be HEX (#00ff00) or web color (default: 'green')
  color?: string;

  // Enable build profiler to analyze loader performance (default: false)
  profile?: boolean;

  // Enable fancy progress bar reporter (default: true when not in CI)
  fancy?: boolean;

  // Enable basic log reporter for minimal environments (default: true in CI)
  basic?: boolean;

  // Register a single custom reporter
  reporter?: Reporter | string | [Reporter | string, any?];

  // Register multiple custom reporters (default: ['fancy'] or ['basic'])
  reporters?: Array<Reporter | string | [Reporter | string, any?]>;
}
```

--------------------------------

### Multiple Concurrent Builds (SSR)

Source: https://context7.com/unjs/webpackbar/llms.txt

Configure multiple WebpackBar instances for parallel builds, such as client and server bundles in SSR applications. Each instance can have a unique name and color.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

const clientConfig = {
  mode: "production",
  entry: "./src/client.js",
  output: {
    filename: "client.js",
    path: "./dist/client",
  },
  plugins: [
    new WebpackBar({
      name: "client",
      color: "green",
    }),
  ],
};

const serverConfig = {
  mode: "production",
  entry: "./src/server.js",
  target: "node",
  output: {
    filename: "server.js",
    path: "./dist/server",
  },
  plugins: [
    new WebpackBar({
      name: "server",
      color: "orange",
    }),
  ],
};

export default [clientConfig, serverConfig];
```

--------------------------------

### Accessing Context Properties in Reporters

Source: https://context7.com/unjs/webpackbar/llms.txt

Utilize the context object to monitor multiple concurrent builds, access individual build states, and handle completion events for all builds.

```javascript
// Multi-build aware reporter
const multiBuildReporter = {
  progress(context) {
    // Check if any build is still running
    if (context.hasRunning) {
      console.log("Builds in progress...");
    }

    // Check if any build has errors
    if (context.hasErrors) {
      console.log("Some builds have errors!");
    }

    // Access all build states sorted by name
    const states = context.statesArray;
    states.forEach((state) => {
      console.log(`${state.name}: ${state.progress}%`);
    });

    // Access states as object keyed by name
    const statesMap = context.states;
    console.log(statesMap); // { client: State, server: State }
  },

  allDone(context) {
    // Called only when ALL concurrent builds complete
    const summary = context.statesArray
      .map((s) => `${s.name}: ${s.hasErrors ? "FAILED" : "OK"}`)
      .join(", ");
    console.log(`All builds finished: ${summary}`);
  },
};

// webpack.config.mjs
import WebpackBar from "webpackbar";

export default [
  {
    entry: "./src/client.js",
    plugins: [
      new WebpackBar({
        name: "client",
        color: "green",
        reporter: multiBuildReporter,
      }),
    ],
  },
  {
    entry: "./src/server.js",
    plugins: [
      new WebpackBar({
        name: "server",
        color: "orange",
        reporter: multiBuildReporter,
      }),
    ],
  },
];
```

--------------------------------

### Force Fancy Reporter Configuration

Source: https://context7.com/unjs/webpackbar/llms.txt

Explicitly enable the fancy reporter for visual progress bars, even in environments where it might not be the default. Ensure 'basic' is disabled.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";

// Force fancy reporter (visual progress bars)
export const fancyConfig = {
  plugins: [
    new WebpackBar({
      name: "fancy",
      fancy: true,
      basic: false,
    }),
  ],
};
```

--------------------------------

### Configure WebpackBar for Webpack

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Add WebpackBar as a plugin to your webpack configuration.

```js
import WebpackBar from "webpackbar";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};
```

--------------------------------

### Configure WebpackBar for Rspack

Source: https://github.com/unjs/webpackbar/blob/main/README.md

Add WebpackBar as a plugin to your Rspack configuration using the rspack-specific import.

```js
import WebpackBar from "webpackbar/rspack";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};
```

--------------------------------

### Register Custom Reporters in Webpack Config

Source: https://context7.com/unjs/webpackbar/llms.txt

Configure webpack to use custom reporters by providing instances of reporter classes or plain objects to the 'reporters' option. Disable default reporters if needed.

```javascript
// webpack.config.mjs
import WebpackBar from "webpackbar";
import CustomReporter from "./custom-reporter.js";

// Simple inline reporter
const logReporter = {
  start(context) {
    console.log(`Starting ${context.state.name}...`);
  },
  done(context) {
    console.log(`Finished ${context.state.name}: ${context.state.message}`);
  },
};

export default {
  mode: "production",
  entry: "./src/index.js",
  plugins: [
    new WebpackBar({
      name: "app",
      color: "blue",
      fancy: false, // Disable default fancy reporter
      basic: false, // Disable default basic reporter
      reporters: [
        new CustomReporter(), // Class instance
        logReporter,          // Plain object
      ],
    }),
  ],
};
```

--------------------------------

### Access Build State in Custom Reporters

Source: https://context7.com/unjs/webpackbar/llms.txt

Utilize the 'context.state' object within custom reporters to access detailed information about the current build status, including progress, messages, and file processing details.

```typescript
interface State {
  // Build start time as hrtime tuple, null if not started
  start: [number, number] | null;

  // Current progress percentage (0-100), -1 if not started
  progress: number;

  // Whether the build has completed
  done: boolean;

  // Current build status message
  message: string;

  // Additional details about current operation
  details: string[];

  // Current file being processed
  request: null | {
    file: null | string;    // File path being processed
    loaders: string[];      // Loaders applied to the file
  };

  // Whether build has errors
  hasErrors: boolean;

  // Progress bar color
  color: string;

  // Build name
  name: string;
}

// Example usage in custom reporter
const stateReporter = {
  progress(context) {
    const state = context.state;
    if (state.request?.file) {
      console.log(`Processing: ${state.request.file}`);
      console.log(`Loaders: ${state.request.loaders.join(" -> ")}`);
    }
    console.log(`Progress: ${state.progress}%`);
    console.log(`Message: ${state.message}`);
  },
};
```

--------------------------------

### Access Plugin State

Source: https://github.com/unjs/webpackbar/blob/main/README.md

The structure of the context.state object available within reporter hooks.

```js
{
  start, progress, message, details, request, hasErrors;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.