{"id":22486402,"url":"https://github.com/webpack-contrib/webpack-stylish","last_synced_at":"2025-08-02T19:31:43.845Z","repository":{"id":65419350,"uuid":"121541746","full_name":"webpack-contrib/webpack-stylish","owner":"webpack-contrib","description":"A stylish, optionated reporter for webpack","archived":true,"fork":false,"pushed_at":"2018-08-29T14:28:42.000Z","size":494,"stargazers_count":198,"open_issues_count":0,"forks_count":18,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-26T10:43:30.570Z","etag":null,"topics":["opinionated","reporter","stylish","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-14T17:48:30.000Z","updated_at":"2025-07-17T16:50:23.000Z","dependencies_parsed_at":"2023-01-22T18:15:29.655Z","dependency_job_id":null,"html_url":"https://github.com/webpack-contrib/webpack-stylish","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/webpack-contrib/webpack-stylish","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fwebpack-stylish","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fwebpack-stylish/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fwebpack-stylish/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fwebpack-stylish/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/webpack-stylish/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fwebpack-stylish/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268440438,"owners_count":24250799,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["opinionated","reporter","stylish","webpack"],"created_at":"2024-12-06T17:14:30.961Z","updated_at":"2025-08-02T19:31:43.438Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![chat][chat]][chat-url]\n\n# webpack-stylish\n\n\u003e ℹ️  DEPRECATION. Reporters moved into [webpack-cli](https://github.com/webpack/webpack-cli) as feature. The issue for [webpack-cli](https://github.com/webpack/webpack-cli) https://github.com/webpack/webpack-cli/issues/575.\n\nA stylish, opinionated reporter for webpack.\n\n![](assets/screenshot.png)\n\nCompared to the default output:\n\n![](assets/screenshot-original.png)\n\nLet's be honest, the default build output for webpack wouldn't exactly hang in\nthe Louvre. Great tools should have beautiful output. This reporter is\nspecifically structured to present common, important¹ information about a build\nin a visually pleasing and easy-to-read format and style.\n\n¹ _subjective, but based on shared experiences._\n\n## Getting Started\n\nTo begin, you'll need to install `webpack-stylish`:\n\n```console\n$ npm install webpack-stylish --save-dev\n```\n\nThen add the reporter as a plugin to your `webpack` config. For example:\n\n```js\nconst path = require('path');\nconst webpack = require('webpack');\nconst Stylish = require('webpack-stylish');\n\nmodule.exports = {\n  context: path.resolve(__dirname),\n  devtool: 'source-map',\n  entry: './entry.js',\n  output: {\n    filename: './output.js',\n    path: path.resolve(__dirname)\n  },\n  plugins: [\n    new webpack.NamedModulesPlugin(),\n    new Stylish()\n  ]\n};\n```\n\n### MultiCompilers\n\nIf you use a config that consists of an array of configs (aka. `MultiCompiler`),\nwe recommend using _a single instance_ of the reporter across all configs. eg;\n\n```js\nconst StylishReporter = require('webpack-stylish');\nconst stylish = new StylishReporter();\n\nmodule.exports = [\n  {\n    ...\n    plugins: [\n      new webpack.NamedModulesPlugin(),\n      stylish\n    ]\n  },\n  {\n    ...\n    plugins: [\n      new webpack.NamedModulesPlugin(),\n      stylish\n    ]\n  }\n];\n```\n\nInternally, the reporter will keep track of the compiler instances it's been\nadded to and will display summary information for all compilers. If you _don't_\nuse a single, shared instance of the reporter, you're going to see a lot of\nduplicate information, and that'd just be silly.\n\n### Webpack CLI\n\nBecause `webpack-cli` reads the `stats` config property _before_ the compilation\nstarts, it tends to go on doing it's own thing. When using `webpack-stylish` in\na config that you're running via the CLI, you need to add `stats: 'none'` to the\nconfig. Otherwise you'll see both this reporter's output, **and** the CLI's.\n\n## Options\n\nThere are none! If you're in need of fine-grained control of webpack's build\ninformation out, please don't use this reporter. Instead, you can fine-tune\nwebpack's default output via the\n[`stats` config property](https://webpack.js.org/configuration/stats/#stats).\n\n## Gotchas\n\nThe `webpack-stylish` reporter will _straight up ignore_ the `stats` property in\nyour `webpack` config, if you have one set. _(This reporter is opinionated!)_.\n\n### Naughty Loaders and Plugins\n\nSome loaders and plugins are going to need a spanking. For they have been naughty\nand are pushing wonky formatting and multiple-errors-packed-into-one errors onto\na compliation's error and/or warning stacks. `webpack-stylish` does it's best\nto compensate for that, but be aware that some plugins will cause some wonky\noutput. For example, `stylelint-webpack-plugin` is guilty of this.\n\nIt's impossible for us to test the world (aka. every plugin ever) so if\nyou see something off, please open an issue and let us know. We'll either\ncompensate further in the code here, or try to bring the offending plugin or\nloader into the light.\n\n## Contributing\n\nWe welcome your contributions! Please have a read of\n[CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.\n\n## License\n\n#### [MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/webpack-stylish.svg\n[npm-url]: https://npmjs.com/package/webpack-stylish\n\n[node]: https://img.shields.io/node/v/webpack-stylish.svg\n[node-url]: https://nodejs.org\n\n[deps]: https://david-dm.org/webpack-contrib/webpack-stylish.svg\n[deps-url]: https://david-dm.org/webpack-contrib/webpack-stylish\n\n[tests]: http://img.shields.io/travis/webpack-contrib/webpack-stylish.svg\n[tests-url]: https://travis-ci.org/webpack-contrib/webpack-stylish\n\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fwebpack-stylish","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fwebpack-stylish","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fwebpack-stylish/lists"}