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