https://github.com/hipstersmoothie/html-progress-indicator-plugin
https://github.com/hipstersmoothie/html-progress-indicator-plugin
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hipstersmoothie/html-progress-indicator-plugin
- Owner: hipstersmoothie
- License: mit
- Created: 2022-11-01T07:19:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-24T01:50:57.000Z (almost 2 years ago)
- Last Synced: 2025-03-12T19:18:22.565Z (about 2 months ago)
- Language: HTML
- Size: 494 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# html-progress-indicator-plugin
A webpack plugin that display the build progress inside the app without having to open the console.
This plugin requires you to also use [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin).
## Installation
```sh
npm i --save-dev html-progress-indicator-plugin
# or
yarn add --dev html-progress-indicator-plugin
```
## Configuration
First add the plugin to your webpack config.
```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
HtmlProgressIndicatorPlugin,
} = require('html-progress-indicator-plugin');
module.exports = {
// Your webpack config
plugins: [
new HtmlWebpackPlugin(),
// This plugin MUST come after your usage of `HtmlWebpackPlugin`
new HtmlProgressIndicatorPlugin(),
],
};
```
Then add the placeholder for the progress indicator into the HTML loaded by `html-webpack-plugin`.
```html
```
That's it!
Now a tiny toast style message will appear in your app while webpack is rebuilding.
## Options
### `placeholder`
Customize the placeholder that goes in your HTML file.
```js
new HtmlProgressIndicatorPlugin({
placeholder: '',
});
```
### `template`
If you want to customize the look of the indicator use the `template` option.
The plugin comes with 2 default progress indicators:
- `default` - What's pictured above
- `nyan` - A nyan cat goes across the screen showing the progress
#### As String
Define your custom template directly in your config (or use a templating library that produces HTML)
```js
const {
MSG_ID,
PROGRESS_ID,
HtmlProgressIndicatorPlugin,
} = require('html-progress-indicator-plugin');
new HtmlProgressIndicatorPlugin({
template: `
`,
});
```
### As path
Or store your template in a different file
```js
new HtmlProgressIndicatorPlugin({
template: './path/to/template.html',
});
```
The IDs in the following HTML will be replaced with the correct IDs.
```html
```