blob: e0bcc24c2d581d20b456e820ceeaa85b820d834c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![test-windows][test-win]][test-win-url]
[![coverage][cover]][cover-url]
<div align="center">
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
<img width="200" height="200" hspace="25" src="./assets/logo.svg">
<a href="https://webpack.js.org/">
<img width="200" height="200" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
</a>
<p>Elegant ProgressBar and Profiler for Webpack</p>
</div>
✔ Display elegant progress bar while building or watch
✔ Support of multiple concurrent builds (useful for SSR)
✔ Pretty print filename and loaders
✔ Windows compatible
✔ Customizable
✔ Advanced build profiler
<div align="center">
<br>
<img src="./assets/screen1.png" width="600px">
<p>Multi progress bars</p>
<br>
</div>
<div align="center">
<br>
<img src="./assets/screen2.png" width="600px">
<p>Build Profiler</p>
<br>
</div>
<h2 align="center">Getting Started</h2>
To begin, you'll need to install `webpackbar`:
Using npm:
```bash
npm install webpackbar -D
```
Using yarn:
```bash
yarn add webpackbar -D
```
Then add the reporter as a plugin to your webpack config.
**webpack.config.js**
```js
const webpack = require('webpack');
const WebpackBar = require('webpackbar');
module.exports = {
context: path.resolve(__dirname),
devtool: 'source-map',
entry: './entry.js',
output: {
filename: './output.js',
path: path.resolve(__dirname)
},
plugins: [
new WebpackBar()
]
};
```
<h2 align="center">Options</h2>
### `name`
- Default: `webpack`
Display name
### `color`
- Default: `green`
Display color (can be HEX like `#xxyyzz` or a web color like `green`).
### `profile`
- Default: `false`
Enable profiler.
### `stream`
- Default: `process.stderr`
Output stream.
### `minimal`
- Default: Auto enabled on CI, non-TTY and test environments
Hide progress bar and only show Compiling/Compiled messages.
### `compiledIn`
- Default: `true`
Show `Compiled in ` message after build.
### `done`
- Type: `Function(sharedState, ctx)`
A function that will be called when **all** builds are finished.
<h2 align="center">Maintainers</h2>
<table>
<tbody>
<tr>
<td align="center">
<a href="https://github.com/pi0">
<img width="150" height="150" src="https://github.com/pi0.png">
</br>
Pooya Parsa
</a>
</td>
</tr>
<tbody>
</table>
[npm]: https://img.shields.io/npm/v/webpackbar.svg?style=flat-square
[npm-url]: https://npmjs.com/package/webpackbar
[deps]: https://david-dm.org/nuxt/webpackbar.svg?style=flat-square
[deps-url]: https://david-dm.org/nuxt/webpackbar
[test]: https://img.shields.io/circleci/project/github/nuxt/webpackbar/master.svg?style=flat-square
[test-url]: https://circleci.com/gh/nuxt/webpackbar
[test-win]: https://img.shields.io/appveyor/ci/nuxt/webpackbar.svg?logo=appveyor&style=flat-square
[test-win-url]: https://ci.appveyor.com/project/nuxt/webpackbar
[cover]: https://codecov.io/gh/nuxt/webpackbar/branch/master/graph/badge.svg?style=flat-square
[cover-url]: https://codecov.io/gh/nuxt/webpackbar
|
