Please consider starring the project to show your
Introduction
Webpack terminal information to browser.
This plugin is recommended for webpack-based app bundler.
Install
yarn add loading-screen -DUsing 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
- 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
Author
loading-screen © EVILLT, Released under the MIT License.
Authored and maintained by EVILLT with help from contributors (list).