1 | [![Standard JS][standard-js-src]][standard-js-href]
|
2 | [![npm version][npm-version-src]][npm-version-href]
|
3 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
|
4 | [![package phobia][package-phobia-src]][package-phobia-href]
|
5 | [![github actions][checks-src]][checks-href]
|
6 |
|
7 |
|
8 | <div align="center">
|
9 |
|
10 | <img width="200" height="200" hspace="25" src="./assets/logo.svg">
|
11 | <a href="https://webpack.js.org/">
|
12 | <img width="200" height="200" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
|
13 | </a>
|
14 | <p>Elegant ProgressBar and Profiler for Webpack</p>
|
15 | </div>
|
16 |
|
17 | ✔ Display elegant progress bar while building or watch
|
18 |
|
19 | ✔ Support of multiple concurrent builds (useful for SSR)
|
20 |
|
21 | ✔ Pretty print filename and loaders
|
22 |
|
23 | ✔ Windows compatible
|
24 |
|
25 | ✔ **Fully** customizable using reporters
|
26 |
|
27 | ✔ Advanced build profiler
|
28 |
|
29 | <div align="center">
|
30 | <br>
|
31 | <img src="./assets/screen1.png" width="600px">
|
32 | <p>Multi progress bars</p>
|
33 | <br>
|
34 | </div>
|
35 |
|
36 | <div align="center">
|
37 | <br>
|
38 | <img src="./assets/screen2.png" width="600px">
|
39 | <p>Build Profiler</p>
|
40 | <br>
|
41 | </div>
|
42 |
|
43 | <h2 align="center">Getting Started</h2>
|
44 |
|
45 | To begin, you'll need to install `webpackbar`:
|
46 |
|
47 | Using npm:
|
48 |
|
49 | ```bash
|
50 | npm install webpackbar -D
|
51 | ```
|
52 |
|
53 | Using yarn:
|
54 |
|
55 | ```bash
|
56 | yarn add webpackbar -D
|
57 | ```
|
58 |
|
59 | Then add the reporter as a plugin to your webpack config.
|
60 |
|
61 | **webpack.config.js**
|
62 |
|
63 | ```js
|
64 | const webpack = require('webpack');
|
65 | const WebpackBar = require('webpackbar');
|
66 |
|
67 | module.exports = {
|
68 | context: path.resolve(__dirname),
|
69 | devtool: 'source-map',
|
70 | entry: './entry.js',
|
71 | output: {
|
72 | filename: './output.js',
|
73 | path: path.resolve(__dirname)
|
74 | },
|
75 | plugins: [
|
76 | new WebpackBar()
|
77 | ]
|
78 | };
|
79 | ```
|
80 |
|
81 | <h2 align="center">Options</h2>
|
82 |
|
83 | ### `name`
|
84 | - Default: `webpack`
|
85 |
|
86 | Name.
|
87 |
|
88 | ### `color`
|
89 | - Default: `green`
|
90 |
|
91 | Primary color (can be HEX like `#xxyyzz` or a web color like `green`).
|
92 |
|
93 | ### `profile`
|
94 | - Default: `false`
|
95 |
|
96 | Enable profiler.
|
97 |
|
98 | ### `fancy`
|
99 |
|
100 | - Default: `true` when not in CI or testing mode.
|
101 |
|
102 | Enable bars reporter.
|
103 |
|
104 | ### `basic`
|
105 |
|
106 | - Default: `true` when running in minimal environments.
|
107 |
|
108 | Enable a simple log reporter (only start and end).
|
109 |
|
110 | ### `reporter`
|
111 |
|
112 | Register a custom reporter.
|
113 |
|
114 | ### `reporters`
|
115 | - Default: `[]`
|
116 |
|
117 | Register an Array of your custom reporters. (Same as `reporter` but array)
|
118 |
|
119 | <h2 align="center">Custom Reporters</h2>
|
120 |
|
121 | Webpackbar comes with a fancy progress-bar out of the box.
|
122 | But you may want to show progress somewhere else or provide your own.
|
123 |
|
124 | For this purpose, you can provide one or more extra reporters using `reporter` and `reporters` options.
|
125 |
|
126 | **NOTE:** If you plan to provide your own reporter, don't forget to setting `fancy` and `basic` options to false to prevent conflicts.
|
127 |
|
128 | A 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.
|
129 |
|
130 | **Simple logger:**
|
131 |
|
132 | ```js
|
133 | {
|
134 | start(context) {
|
135 | // Called when (re)compile is started
|
136 | },
|
137 | change(context) {
|
138 | // Called when a file changed on watch mode
|
139 | },
|
140 | update(context) {
|
141 | // Called after each progress update
|
142 | },
|
143 | done(context) {
|
144 | // Called when compile finished
|
145 | },
|
146 | progress(context) {
|
147 | // Called when build progress updated
|
148 | },
|
149 | allDone(context) {
|
150 | // Called when _all_ compiles finished
|
151 | },
|
152 | beforeAllDone(context) {
|
153 | },
|
154 | afterAllDone(context) {
|
155 | },
|
156 | }
|
157 | ```
|
158 |
|
159 | `context` is the reference to the plugin. You can use `context.state` to access status.
|
160 |
|
161 |
|
162 | **Schema of `context.state`:**
|
163 |
|
164 | ```js
|
165 | {
|
166 | start,
|
167 | progress,
|
168 | message,
|
169 | details,
|
170 | request,
|
171 | hasErrors
|
172 | }
|
173 | ```
|
174 |
|
175 | <h2 align="center">License</h2>
|
176 |
|
177 | MIT - Made with 💖 By Nuxt.js team!
|
178 |
|
179 |
|
180 | [standard-js-src]: https://flat.badgen.net/badge/code%20style/standard/green
|
181 | [standard-js-href]: https://standardjs.com
|
182 |
|
183 | [npm-version-src]: https://flat.badgen.net/npm/v/webpackbar/latest
|
184 | [npm-version-href]: https://npmjs.com/package/webpackbar
|
185 |
|
186 | [npm-downloads-src]: https://flat.badgen.net/npm/dm/webpackbar
|
187 | [npm-downloads-href]: https://npmjs.com/package/webpackbar
|
188 |
|
189 | [package-phobia-src]: https://flat.badgen.net/packagephobia/install/webpackbar
|
190 | [package-phobia-href]: https://packagephobia.now.sh/result?p=webpackbar
|
191 |
|
192 | [checks-src]: https://flat.badgen.net/github/checks/nuxt-contrib/webpackbar/master
|
193 | [checks-href]: https://github.com/nuxt-contrib/webpackbar/actions
|