Skip to content

Commit 62d838e

Browse files
author
Spencer Elliott
committed
docs: add ProgressPlugin + progress reporting
1 parent 704889b commit 62d838e

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

src/content/api/plugins.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,35 @@ compiler.hooks.myCustomHook.call(a, b, c);
9999
Again, see the [documentation](https://github.com/webpack/tapable) for `tapable` to learn more about the
100100
different hook classes and how they work.
101101

102+
## Reporting Progress
103+
104+
Plugins can report progress information, which is printed by [the CLI](/api/cli/) when the `--progress` argument is used. More generally, progress information is passed to [`ProgressPlugin`](/plugins/progress-plugin/), which can be used to customize how progress information is reported to the user.
105+
106+
To report progress, a plugin must `tap` into a hook using the `context: true` option:
107+
108+
```js
109+
compiler.hooks.emit.tapAsync({
110+
name: 'MyPlugin',
111+
context: true
112+
}, (context, compiler, callback) => {
113+
const reportProgress = context && context.reportProgress;
114+
if (reportProgress) reportProgress(0.95, 'Starting work');
115+
setTimeout(() => {
116+
if (reportProgress) reportProgress(0.95, 'Done work');
117+
callback();
118+
}, 1000);
119+
});
120+
```
121+
122+
The `reportProgress` function has this signature:
123+
124+
```js
125+
reportProgress(percentage: number, ...args: string[]): void;
126+
```
127+
128+
Currently, the `percentage` argument is unused; instead, [`ProgressPlugin`](/plugins/progress-plugin/) will calculate a percentage based on the current hook. The remaining string `args` will be passed to the `ProgressPlugin` handler to be reported to the user.
129+
130+
Note that only a subset of compiler and compilation hooks support the `reportProgress` function. See [`ProgressPlugin`](/plugins/progress-plugin/#supported-hooks) for a full list.
102131

103132
## Next Steps
104133

src/content/plugins/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ Name | Description
3535
[`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimization-noemitonerrors) | Skip the emitting phase when there are compilation errors
3636
[`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin) | Replace resource(s) that matches a regexp
3737
[`NpmInstallWebpackPlugin`](/plugins/npm-install-webpack-plugin) | Auto-install missing dependencies during development
38+
[`ProgressPlugin`](/plugins/progress-plugin) | Report compilation progress
3839
[`ProvidePlugin`](/plugins/provide-plugin) | Use modules without having to use import/require
3940
[`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) | Enables a more fine grained control of source maps
4041
[`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin) | Enables a more fine grained control of eval source maps
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: ProgressPlugin
3+
contributors:
4+
- elliottsj
5+
---
6+
7+
The `ProgressPlugin` provides a way to customize how progress is reported during a compilation.
8+
9+
## Usage
10+
11+
Create an instance of `ProgressPlugin` with a handler function which will be called when hooks report progress:
12+
13+
```js
14+
const handler = (percentage, message, ...args) => {
15+
// ...
16+
};
17+
18+
new webpack.ProgressPlugin(handler);
19+
```
20+
21+
* `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation.
22+
* `message`: a short description of the currently-executing hook.
23+
* `...args`: zero or more additional strings describing the current progress.
24+
25+
## Supported Hooks
26+
27+
The following hooks report progress information to `ProgressPlugin`.
28+
29+
T> _* Hooks allowing plugins to report progress information using `reportProgress`. For more, see [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)_
30+
31+
### Compiler
32+
33+
* compilation
34+
* emit*
35+
* afterEmit*
36+
* done
37+
38+
### Compilation
39+
40+
* buildModule
41+
* failedModule
42+
* succeedModule
43+
* finishModules*
44+
* seal*
45+
* optimizeDependenciesBasic*
46+
* optimizeDependencies*
47+
* optimizeDependenciesAdvanced*
48+
* afterOptimizeDependencies*
49+
* optimize*
50+
* optimizeModulesBasic*
51+
* optimizeModules*
52+
* optimizeModulesAdvanced*
53+
* afterOptimizeModules*
54+
* optimizeChunksBasic*
55+
* optimizeChunks*
56+
* optimizeChunksAdvanced*
57+
* afterOptimizeChunks*
58+
* optimizeTree*
59+
* afterOptimizeTree*
60+
* optimizeChunkModulesBasic*
61+
* optimizeChunkModules*
62+
* optimizeChunkModulesAdvanced*
63+
* afterOptimizeChunkModules*
64+
* reviveModules*
65+
* optimizeModuleOrder*
66+
* advancedOptimizeModuleOrder*
67+
* beforeModuleIds*
68+
* moduleIds*
69+
* optimizeModuleIds*
70+
* afterOptimizeModuleIds*
71+
* reviveChunks*
72+
* optimizeChunkOrder*
73+
* beforeChunkIds*
74+
* optimizeChunkIds*
75+
* afterOptimizeChunkIds*
76+
* recordModules*
77+
* recordChunks*
78+
* beforeHash*
79+
* afterHash*
80+
* recordHash*
81+
* beforeModuleAssets*
82+
* beforeChunkAssets*
83+
* additionalChunkAssets*
84+
* record*
85+
* additionalAssets*
86+
* optimizeChunkAssets*
87+
* afterOptimizeChunkAssets*
88+
* optimizeAssets*
89+
* afterOptimizeAssets*
90+
* afterSeal*
91+
92+
## References
93+
94+
### Source
95+
96+
* [`ProgressPlugin` source](https://github.com/webpack/webpack/blob/master/lib/ProgressPlugin.js)

0 commit comments

Comments
 (0)