# @jsany/log-filesize-webpack-plugin

> log assets size after webpack build(wirte by typescript)

Latest version **1.2.13** (published 2020-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jsany/log-filesize-webpack-plugin
pnpm add @jsany/log-filesize-webpack-plugin
yarn add @jsany/log-filesize-webpack-plugin
bun add @jsany/log-filesize-webpack-plugin
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.13 |
| Published | 2020-09-11 |
| First published | 2020-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 30.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | jiangzhiguo2010 |
| Maintainers | jiangzhiguo2010 |
| Keywords | log, assets, filesize, gzip, webpack, plugin |

## Links

- npm: https://www.npmjs.com/package/@jsany/log-filesize-webpack-plugin
- Repository: https://github.com/jsany/log-filesize-webpack-plugin
- Homepage: https://github.com/jsany/log-filesize-webpack-plugin#readme
- Issues: https://github.com/jsany/log-filesize-webpack-plugin/issues
- npm.io page: https://npm.io/package/@jsany/log-filesize-webpack-plugin

## Dependencies (5)

- [mime](https://npm.io/package/mime.md) ^2.4.6
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [cliui](https://npm.io/package/cliui.md) ^6.0.0
- [webpack](https://npm.io/package/webpack.md) ^4.43.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.12

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 1.2.13 (latest) — 2020-09-11
- 1.2.12 — 2020-08-19
- 1.2.11 — 2020-08-06
- 1.2.10 — 2020-08-01
- 1.2.9 — 2020-07-24
- 1.2.8 — 2020-07-24
- 1.2.7 — 2020-07-21
- 1.2.6 — 2020-07-21
- 1.2.5 — 2020-07-21
- 1.2.4 — 2020-07-21
- 1.2.3 — 2020-07-21
- 1.2.2 — 2020-07-21
- 1.2.1 — 2020-07-21
- 1.1.5 — 2020-07-20
- 1.1.4 — 2020-07-20
- … 8 more at https://npm.io/package/@jsany/log-filesize-webpack-plugin/versions

## README

<h1 align="center">Welcome to log-filesize-webpack-plugin 👋</h1>

<p>
  <a href="https://www.npmjs.com/package/@jsany/log-filesize-webpack-plugin" target="_blank">
    <img alt="npm version" src="https://img.shields.io/npm/v/@jsany/log-filesize-webpack-plugin/latest?logo=npm&style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/@jsany/log-filesize-webpack-plugin" target="_blank">
    <img alt="npm miniziped size" src="https://img.shields.io/bundlephobia/minzip/@jsany/log-filesize-webpack-plugin/latest?logo=npm&style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/@jsany/log-filesize-webpack-plugin" target="_blank">
    <img alt="node version" src="https://img.shields.io/node/v/@jsany/log-filesize-webpack-plugin?color=blue&style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/@jsany/log-filesize-webpack-plugin" target="_blank">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/jsany/log-filesize-webpack-plugin/Publish?logo=github&style=flat-square" />
  </a>
  <a href="https://codecov.io/gh/jsany/log-filesize-webpack-plugin" target="_blank">
    <img alt="codecov" src="https://img.shields.io/codecov/c/github/jsany/log-filesize-webpack-plugin/main?logo=codecov&style=flat-square" />
  </a>
  <a href="https://github.com/jsany/log-filesize-webpack-plugin#readme" target="_blank">
    <img alt="documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg?style=flat-square" />
  </a>
  <a href="https://github.com/jsany/log-filesize-webpack-plugin/graphs/commit-activity" target="_blank">
    <img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg?style=flat-square" />
  </a>
  <a href="https://github.com/jsany/log-filesize-webpack-plugin/blob/main/LICENSE" target="_blank">
    <img alt="License" src="https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square" />
  </a>
</p>

> log assets size pretty after webpack build(wirte by typescript)

### 🏠 [Homepage](https://github.com/jsany/log-filesize-webpack-plugin#readme)

### ✨ [Example](https://github.com/jsany/log-filesize-example)

<https://github.com/jsany/log-filesize-example/blob/main/webpack.config.js#L168>

## Prerequisites

- node >=10
- webpack >=4

## Install

```sh
yarn add -D @jsany/log-filesize-webpack-plugin
# or npm install --save-dev @jsany/log-filesize-webpack-plugin
```

## Setup

### In `webpack.config.js`:

```js
const LogFilesizeWebpackPlugin = require('@jsany/log-filesize-webpack-plugin');

module.exports = {
  stats: 'none', // to close webpack print
  // ...
  plugins: [
    new LogFilesizeWebpackPlugin()
    // or
    // new LogFilesizeWebpackPlugin({gzip: true,...OtherOptions})
  ]
  // ...
};
```

### Then run build, it will look like this:

![example](screenshots/example.png)

## Options

| Options    | Type                                                                                               | Default                                                     | Description                                                           |
| ---------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------- |
| `gzip`     | boolean                                                                                            | `true`                                                      | Print gzipped filesize                                                |
| `errors`   | boolean                                                                                            | `true`                                                      | Print compile errors                                                  |
| `warnings` | boolean                                                                                            | `true`                                                      | Print compile warnings                                                |
| `hash`     | boolean                                                                                            | `true`                                                      | Print current compile hash                                            |
| `version`  | boolean                                                                                            | `true`                                                      | Print current webpack version                                         |
| `time`     | boolean                                                                                            | `true`                                                      | Print compile cost time                                               |
| `builtAt`  | boolean                                                                                            | `true`                                                      | Print when to start compiling                                         |
| `maxSize`  | number                                                                                             | `1.8 * 1024 * 1024` (Byte)                                  | These sizes are pretty large. We'll warn for bundles exceeding them   |
| `priority` | { js?: number, css?: number,image?: number,font?: number,json?: number,txt?: number,html?: number} | `{ js: 10, css: 9,image: 8,font: 7,json: 6,txt: 5,html: 4}` | The larger the value, the higher the sort, and hide if less than zero |

## Feature

- [x] Support javascript and switch log it
- [x] Support css and switch log it
- [x] Support image and switch log it
- [x] Support json and switch log it
- [x] Support font and switch log it
- [x] Support txt and switch log it
- [x] Support html and switch log it
- [x] Support custom assets log priority

## Todo

- [ ] Support custom file color
- [ ] ...

### Support files with these extensions: [ext look detail](./src/helper/mimeMap.ts)

## Author

👤 **jiangzhiguo2010**

- Website: <https://github.com/Mr-jiangzhiguo/book>
- Github: [@jsany](https://github.com/jsany)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/jsany/log-filesize-webpack-plugin/issues). You can also take a look at the [contributing guide](https://github.com/jsany/log-filesize-webpack-plugin/blob/main/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2020 [jiangzhiguo2010](https://github.com/jsany).<br />
This project is [MIT](https://github.com/jsany/log-filesize-webpack-plugin/blob/main/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

---
_Source: https://npm.io/package/@jsany/log-filesize-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._