Skip to content

docs: add ProgressPlugin + progress reporting #2293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/content/api/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,38 @@ compiler.hooks.myCustomHook.call(a, b, c);
Again, see the [documentation](https://github.com/webpack/tapable) for `tapable` to learn more about the
different hook classes and how they work.

## Reporting Progress

Plugins can report progress via [`ProgressPlugin`](/plugins/progress-plugin/), which prints progress messages to stderr by default. In order to enable progress reporting, pass a `--progress` argument when running the [webpack CLI](/api/cli/).

It is possible to customize the printed output by passing different arguments to the `reportProgress` function of [`ProgressPlugin`](/plugins/progress-plugin/).

To report progress, a plugin must `tap` into a hook using the `context: true` option:

```js
compiler.hooks.emit.tapAsync({
name: 'MyPlugin',
context: true
}, (context, compiler, callback) => {
const reportProgress = context && context.reportProgress;
if (reportProgress) reportProgress(0.95, 'Starting work');
setTimeout(() => {
if (reportProgress) reportProgress(0.95, 'Done work');
callback();
}, 1000);
});
```

The `reportProgress` function may be called with these arguments:

```js
reportProgress(percentage, ...args);
```

* `percentage`: This argument is unused; instead, [`ProgressPlugin`](/plugins/progress-plugin/) will calculate a percentage based on the current hook.
* `...args`: Any number of strings, which will be passed to the `ProgressPlugin` handler to be reported to the user.

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.

## Next Steps

Expand Down
1 change: 1 addition & 0 deletions src/content/plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ Name | Description
[`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimization-noemitonerrors) | Skip the emitting phase when there are compilation errors
[`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin) | Replace resource(s) that matches a regexp
[`NpmInstallWebpackPlugin`](/plugins/npm-install-webpack-plugin) | Auto-install missing dependencies during development
[`ProgressPlugin`](/plugins/progress-plugin) | Report compilation progress
[`ProvidePlugin`](/plugins/provide-plugin) | Use modules without having to use import/require
[`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) | Enables a more fine grained control of source maps
[`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin) | Enables a more fine grained control of eval source maps
Expand Down
96 changes: 96 additions & 0 deletions src/content/plugins/progress-plugin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
title: ProgressPlugin
contributors:
- elliottsj
---

The `ProgressPlugin` provides a way to customize how progress is reported during a compilation.

## Usage

Create an instance of `ProgressPlugin` with a handler function which will be called when hooks report progress:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a showcase within your own plugin right? maybe provide a context e.g.

myPlugin.js

const handler = (percentage, message, ...args) => {
.....

Copy link
Member Author

@elliottsj elliottsj Jun 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can used inside of a plugin (e.g. progress-bar-webpack-plugin), but ProgressPlugin can also be used standalone, e.g.

// webpack.config.js

module.exports = {
  plugins: [
    new ProgressPlugin((percentage, message, ...args) => {
      console.info(percentage, message, ...args);
    })
  ]
};

I'd like to keep the initial "Usage" code snippet simple and consistent with the other plugin pages on the site.

I agree that it would be useful to showcase / link to examples of using ProgressPlugin within a parent plugin. What if I add an "Examples" section and link to ProgressPlugin usage within progress-bar-webpack-plugin / webpack-cli / webpack-command?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the example you gave is much better in my opinion, maybe replace it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to include the console.info() line.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think I should include the module.exports = { plugins: [ part too? Leaving it out for now for consistency with the other plugin docs


```js
const handler = (percentage, message, ...args) => {
// e.g. Output each progress message directly to the console:
console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);
```

* `handler` is a function which takes these arguments:
* `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation.
* `message`: a short description of the currently-executing hook.
* `...args`: zero or more additional strings describing the current progress.

## Supported Hooks

The following hooks report progress information to `ProgressPlugin`.

T> _Hooks marked with * allow plugins to report progress information using `reportProgress`. For more, see [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)_

**Compiler**

* compilation
* emit*
* afterEmit*
* done

**Compilation**

* buildModule
* failedModule
* succeedModule
* finishModules*
* seal*
* optimizeDependenciesBasic*
* optimizeDependencies*
* optimizeDependenciesAdvanced*
* afterOptimizeDependencies*
* optimize*
* optimizeModulesBasic*
* optimizeModules*
* optimizeModulesAdvanced*
* afterOptimizeModules*
* optimizeChunksBasic*
* optimizeChunks*
* optimizeChunksAdvanced*
* afterOptimizeChunks*
* optimizeTree*
* afterOptimizeTree*
* optimizeChunkModulesBasic*
* optimizeChunkModules*
* optimizeChunkModulesAdvanced*
* afterOptimizeChunkModules*
* reviveModules*
* optimizeModuleOrder*
* advancedOptimizeModuleOrder*
* beforeModuleIds*
* moduleIds*
* optimizeModuleIds*
* afterOptimizeModuleIds*
* reviveChunks*
* optimizeChunkOrder*
* beforeChunkIds*
* optimizeChunkIds*
* afterOptimizeChunkIds*
* recordModules*
* recordChunks*
* beforeHash*
* afterHash*
* recordHash*
* beforeModuleAssets*
* beforeChunkAssets*
* additionalChunkAssets*
* record*
* additionalAssets*
* optimizeChunkAssets*
* afterOptimizeChunkAssets*
* optimizeAssets*
* afterOptimizeAssets*
* afterSeal*

## Source

* [`ProgressPlugin` source](https://github.com/webpack/webpack/blob/master/lib/ProgressPlugin.js)