Webpack dev server status bar
when webpack status changes from idle -> compiling -> error / warning, a thin bar at the top of the page that changes colors.
Its essentially a nice unobtrusive webpack status notification system
Usage
Add webpack-dev-server-status-bar
as an entry point if invoked via dev-server
Example:
const path = ;const webpack = ;const isDevServer = processargv; const webpackConfig = entry: app: "./src/index.js" output: path: path filename: `[name].bundle.js` module: rules: // <loader rules here> plugins: ; if isDevServer webpackConfigentryapp; moduleexports = webpackConfig;
Status Colors
Connected and Idle
Disconnected
Detected change and compiling
Compiled with warnings
Compiled with errors
Customizing
See index.js
for how they are used.
window.__webpackStatusElem__
[HTMLElement] Element to apply the style on. Default is top leveldiv#__webpack_status_bar__
.window.__webpackEventColors__
[Object] Override default colors.window.__webpackStatusStyleFunction__
[Function] Compute custom css style based on status[data-webpack-status]
Attribute to be used with CSS selectors. See colors objects for available values.
Please note that if you want to keep away custom configs from your production codebase, than you should add these inside your own modules.
Customization example
// In webpack configif isDevServer webpackConfigentryapp; // ./src/webpackStatusBarwindow__webpackStatusElem__ = document; window__webpackStatusColors__ = ok: `#0000ff` // very green errors: `#ff0000` // as red as red can be // see index.js for event names and colors; /** * @typedef * @prop * @prop * @prop * @prop * * @param * @returns {{[prop: string]: any}} - a styles property bag */window border: `1px solid ` position: `absolute` top: `0px` width: `vw` content: statusevent ;