Skip to content

šŸš„Loading screen for webpack plugin inspired by Nuxt.js's loading screen

License

Notifications You must be signed in to change notification settings

2nthony/loading-screen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Ā 

History

43 Commits
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 

Repository files navigation

logo


NPM version NPM download CircleCI $donate

Please consider starring the project to show your ā¤ļø and support.

Introduction

Webpack terminal information to browser.

This plugin is recommended for webpack-based app bundler.

Install

yarn add loading-screen -D

Using poi? Go poi-plugin-loading-screen

Usage

In your webpack.config.js:

const LoadingScreenPlugin = require('loading-screen')

module.exports = {
  plugins: [new LoadingScreenPlugin()]
}

API

new LoadingScreenPlugin(options)

host

  • Type: string
  • Default: 'localhost'

The loading screen server host.

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

port

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

The loading screen server port.

callback

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

The loading screen server callback.

baseURL

  • Type: string
  • Default: '/'

Similiar with webpack.output.publicPath.

logo

  • 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: '<div>my logo</div>'
})

theme

  • Type: ThemeConfig
  • Default: DefaultThemeConfig

Customize loading screen progress bar color.

interface ThemeConfig {
  client?: string
  server?: string
  modern?: string
}

const DefaultThemeConfig = {
  client: '#8ed5fb',
  server: '#1b78bf',
  modern: '#2f495e'
}

env

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

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

handler

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

Progress hooks report details.

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

showPercent

  • Type: boolean
  • Default: true

Credits

Contributing

  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

Author

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

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

evila.me Ā· GitHub @evillt Ā· Twitter @evillt