Please consider starring the project to show your ā¤ļø and support.
Webpack terminal information to browser.
This plugin is recommended for webpack-based app bundler.
yarn add loading-screen -D
Using poi? Go poi-plugin-loading-screen
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: '<div>my logo</div>'
})
- 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'
}
- 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/
- Type:
boolean
- Default:
true
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
loading-screen Ā© EVILLT, Released under the MIT License.
Authored and maintained by EVILLT with help from contributors (list).