Display webpack building progress in the browser.

This plugin is recommended for webpack-based app bundler.

yarn add loading-screen -D

In your webpack.config.js:

const LoadingScreenPlugin = require('loading-screen') module.exports = { plugins: [new LoadingScreenPlugin()] }

new LoadingScreenPlugin(options)

• Type: string
• Default: 'localhost'

The loading screen server host.

P.S. CANNOT be the same as the app server host.

• Type: number
• Default: process.env.port || 4000

The loading screen server port.

• Type: (req, res) => void
• DefaultBehavior: Print loading screen server message.

The loading screen server callback.

• Type: string
• Default: '/'

Similiar with webpack.output.publicPath.

• Type: url | HTML.innerHTML
• Default: 'https://webpack.js.org/assets/icon-square-big.svg' which mean is webpack logo

Set url to display your prefer logo for loading screen.

Or with regular HTML:

new LoadingScreenPlugin({ logo: '<svg xmlns>...</svg>' })

• Type: 'development' | 'production'
• Default: process.env.NODE_ENV

Enable loading screen when is 'development', disable otherwise.

• Type: (per, message, ...details) => void

Progress hooks report details.

Reference: https://webpack.js.org/plugins/progress-plugin/

• nuxt/loading-screen

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

loading-screen © EVILLT, Released under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

evila.me · GitHub @evillt · Twitter @evillt