{"id":13452020,"url":"https://github.com/unjs/webpackbar","last_synced_at":"2025-05-14T11:08:24.328Z","repository":{"id":38198451,"uuid":"126595796","full_name":"unjs/webpackbar","owner":"unjs","description":"Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5","archived":false,"fork":false,"pushed_at":"2025-05-05T17:35:32.000Z","size":2663,"stargazers_count":2083,"open_issues_count":21,"forks_count":67,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-07T10:52:37.700Z","etag":null,"topics":["bundler","javascript","node","profile","progressbar","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-24T12:11:46.000Z","updated_at":"2025-04-29T10:09:37.000Z","dependencies_parsed_at":"2023-10-14T23:07:54.832Z","dependency_job_id":"1201bec2-c41e-4f81-bb58-271c424cd618","html_url":"https://github.com/unjs/webpackbar","commit_stats":{"total_commits":290,"total_committers":26,"mean_commits":"11.153846153846153","dds":0.4862068965517241,"last_synced_commit":"1f2f0c8c29cc5dfeb35790a13ae4e8cc58d24ee4"},"previous_names":["nuxt/webpackbar"],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fwebpackbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fwebpackbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fwebpackbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fwebpackbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unjs","download_url":"https://codeload.github.com/unjs/webpackbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129481,"owners_count":22019628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bundler","javascript","node","profile","progressbar","webpack"],"created_at":"2024-07-31T07:01:10.287Z","updated_at":"2025-05-14T11:08:24.287Z","avatar_url":"https://github.com/unjs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript"],"sub_categories":[],"readme":"\u003c!-- automd:badges packagephobia --\u003e\n\n[![npm version](https://img.shields.io/npm/v/webpackbar)](https://npmjs.com/package/webpackbar)\n[![npm downloads](https://img.shields.io/npm/dm/webpackbar)](https://npm.chart.dev/webpackbar)\n\n\u003c!-- /automd --\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- replace with accurate logo e.g from https://worldvectorlogo.com/ --\u003e\n  \u003cimg width=\"200\" height=\"200\" hspace=\"25\"  src=\"./assets/logo.svg\"\u003e\n  \u003ca href=\"https://webpack.js.org/\"\u003e\n    \u003cimg width=\"200\" height=\"200\" hspace=\"25\" src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n  \u003cp\u003eElegant ProgressBar and Profiler for [Webpack](https://webpack.js.org/) and [Rspack](https://rspack.dev/). \u003c/p\u003e\n\u003c/div\u003e\n\n✔ Display elegant progress bar while building or watch\n\n✔ Support of multiple concurrent builds (useful for SSR)\n\n✔ Pretty print filename and loaders\n\n✔ Windows compatible\n\n✔ Fully customizable using reporters\n\n✔ Advanced build profiler\n\n\u003cdiv align=\"center\"\u003e\n\u003cbr\u003e\n\u003cimg src=\"./assets/screen1.png\" width=\"600px\"\u003e\n\u003cp\u003eMulti progress bars\u003c/p\u003e\n\u003cbr\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cbr\u003e\n\u003cimg src=\"./assets/screen2.png\" width=\"600px\"\u003e\n\u003cp\u003eBuild Profiler\u003c/p\u003e\n\u003cbr\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eGetting Started\u003c/h2\u003e\n\nTo begin, you'll need to install `webpackbar`:\n\n\u003c!-- automd:pm-i --\u003e\n\n```sh\n# ✨ Auto-detect\nnpx nypm install webpackbar\n\n# npm\nnpm install webpackbar\n\n# yarn\nyarn add webpackbar\n\n# pnpm\npnpm install webpackbar\n\n# bun\nbun install webpackbar\n\n# deno\ndeno install webpackbar\n```\n\n\u003c!-- /automd --\u003e\n\nThen add the reporter as a plugin to your webpack config (make sure `webpack` peer dependency is installed).\n\n**`webpack.config.mjs`**\n\n```js\nimport WebpackBar from \"webpackbar\";\n\nexport default {\n  entry: \"./src/entry.js\",\n  plugins: [\n    new WebpackBar({\n      /* options */\n    }),\n  ],\n};\n```\n\nFor using with [Rspack](https://rspack.dev/), you can use `webpackbar/rspack` (make sure `@rspack/core` peer dependency is installed).\n\n**`rspack.config.mjs`**:\n\n```js\nimport WebpackBar from \"webpackbar/rspack\";\n\nexport default {\n  entry: \"./src/entry.js\",\n  plugins: [\n    new WebpackBar({\n      /* options */\n    }),\n  ],\n};\n```\n\n\u003ch2 align=\"center\"\u003eOptions\u003c/h2\u003e\n\n### `name`\n\n- Default: `webpack`\n\nName.\n\n### `color`\n\n- Default: `green`\n\nPrimary color (can be HEX like `#xxyyzz` or a web color like `green`).\n\n### `profile`\n\n- Default: `false`\n\nEnable profiler.\n\n### `fancy`\n\n- Default: `true` when not in CI or testing mode.\n\nEnable bars reporter.\n\n### `basic`\n\n- Default: `true` when running in minimal environments.\n\nEnable a simple log reporter (only start and end).\n\n### `reporter`\n\nRegister a custom reporter.\n\n### `reporters`\n\n- Default: `[]`\n\nRegister an Array of your custom reporters. (Same as `reporter` but array)\n\n\u003ch2 align=\"center\"\u003eCustom Reporters\u003c/h2\u003e\n\nWebpackbar comes with a fancy progress-bar out of the box.\nBut you may want to show progress somewhere else or provide your own.\n\nFor this purpose, you can provide one or more extra reporters using `reporter` and `reporters` options.\n\n**NOTE:** If you plan to provide your own reporter, don't forget to setting `fancy` and `basic` options to false to prevent conflicts.\n\nA 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.\n\n**Simple logger:**\n\n```js\nconst logger = {\n  start(context) {\n    // Called when (re)compile is started\n  },\n  change(context) {\n    // Called when a file changed on watch mode\n  },\n  update(context) {\n    // Called after each progress update\n  },\n  done(context) {\n    // Called when compile finished\n  },\n  progress(context) {\n    // Called when build progress updated\n  },\n  allDone(context) {\n    // Called when _all_ compiles finished\n  },\n  beforeAllDone(context) {},\n  afterAllDone(context) {},\n};\n```\n\n`context` is the reference to the plugin. You can use `context.state` to access status.\n\n**Schema of `context.state`:**\n\n```js\n{\n  start, progress, message, details, request, hasErrors;\n}\n```\n\n\u003ch2 align=\"center\"\u003eLicense\u003c/h2\u003e\n\n[MIT](./LICENSE)\n\n\u003c!-- Refs --\u003e\n\n[standard-js-src]: https://flat.badgen.net/badge/code%20style/standard/green\n[standard-js-href]: https://standardjs.com\n[npm-version-src]: https://flat.badgen.net/npm/v/webpackbar/latest\n[npm-version-href]: https://npmjs.com/package/webpackbar\n[npm-downloads-src]: https://flat.badgen.net/npm/dm/webpackbar\n[npm-downloads-href]: https://npmjs.com/package/webpackbar\n[package-phobia-src]: https://flat.badgen.net/packagephobia/install/webpackbar\n[package-phobia-href]: https://packagephobia.now.sh/result?p=webpackbar\n[checks-src]: https://flat.badgen.net/github/checks/nuxt-contrib/webpackbar/master\n[checks-href]: https://github.com/nuxt-contrib/webpackbar/actions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funjs%2Fwebpackbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funjs%2Fwebpackbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funjs%2Fwebpackbar/lists"}