HtmlProgressIndicatorPlugin

0.4.0 verified Sat Apr 25 auth: no javascript

A webpack plugin (v0.4.0) that displays build progress inside the browser page as a toast/nyan cat indicator, eliminating the need to watch terminal output. Requires html-webpack-plugin and webpack 5. Adds a script into the HTML to show progress during hot reloads. Ships TypeScript types. Peer deps: @types/webpack, html-webpack-plugin, webpack. Release cadence: sporadic, last release Nov 2022.

Common errors

error Error: HtmlProgressIndicatorPlugin is not a constructor ↓

cause Importing default instead of named export

fix

Use const { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin')

error TypeError: Cannot read property 'hooks' of undefined ↓

cause HtmlWebpackPlugin not added before HtmlProgressIndicatorPlugin

fix

Add new HtmlWebpackPlugin() before new HtmlProgressIndicatorPlugin() in plugins array

error The progress indicator does not appear in the browser ↓

cause Missing placeholder comment in HTML template

fix

Ensure  is inside the <body> tag of your HTML file

Warnings

gotcha Plugin must be added AFTER HtmlWebpackPlugin in the plugins array ↓

fix Ensure new HtmlProgressIndicatorPlugin() comes after new HtmlWebpackPlugin()

gotcha Placeholder comment  is required in HTML template ↓

fix Add  inside the <body> of your HTML template else the indicator won't appear

deprecated Default placeholder may be removed in future versions; use custom placeholder ↓

fix Specify placeholder option explicitly

gotcha Only works with webpack 5 (peer dependency) ↓

fix Upgrade webpack to v5 or use an older version of the plugin

gotcha Requires html-webpack-plugin v5 ↓

fix Use html-webpack-plugin v5

gotcha Node.js >=10 required ↓

fix Use Node.js 10 or later

Install

npm install html-progress-indicator-plugin

yarn add html-progress-indicator-plugin

pnpm add html-progress-indicator-plugin

Imports

HtmlProgressIndicatorPlugin
wrong
```
const HtmlProgressIndicatorPlugin = require('html-progress-indicator-plugin')
```
correct
```
import { HtmlProgressIndicatorPlugin } from 'html-progress-indicator-plugin'
```
ESM-only since v0.4.0? Package.json has no 'type':'module' but uses ESM syntax? Actually it uses CJS require in examples; but the import works if bundler supports ESM. The 'wrong' pattern is using default import (import X from '...') which doesn't exist.
MSG_ID
```
import { MSG_ID } from 'html-progress-indicator-plugin'
```
Exported constant for custom template ID placeholder.
PROGRESS_ID
```
import { PROGRESS_ID } from 'html-progress-indicator-plugin'
```
Exported constant for custom template ID placeholder.

Quickstart

Configures webpack with HtmlWebpackPlugin and HtmlProgressIndicatorPlugin, and adds the required placeholder comment in the HTML template.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new HtmlProgressIndicatorPlugin(),
  ],
};

// src/index.html
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  <div id="app"></div>
  <!-- reload-indicator-placeholder -->
</body>
</html>