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).
npm install html-progress-indicator-pluginA 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.
!A toast displaying the re-build progress
``sh`
npm i --save-dev html-progress-indicator-pluginor
yarn add --dev html-progress-indicator-plugin
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.
Customize the placeholder that goes in your HTML file.
`js`
new HtmlProgressIndicatorPlugin({
placeholder: '',
});
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 abovenyan
- - 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:
,
});
`$3
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
>