webpack-serve-waitpage

Webpack progress wait page for webpack-serve

Instead of waiting for webpack to finish compiling, see a nice progress wait page.

Installation

npm

npm install -D webpack-serve-waitpage

yarn

yarn add -D webpack-serve-waitpage

Usage

webpack.config.js

Inside the add option function of serve enter the following line as in the example below:

const webpackServeWaitpage = require('webpack-serve-waitpage');

...

module.exports.serve = {
  add: (app, middleware, options) => {
    // Be sure to pass the options argument from the arguments
    app.use(webpackServeWaitpage(options));

    // Make sure the usage of webpack-serve-waitpage will be before the following commands if exists
    // middleware.webpack();
    // middleware.content();
  }
};

You can also provide options object for the middleware as a second parameter (i.e. app.use(webpackServeWaitpage(options, {})) or omit it.

Middleware options

| Option |Description|Type|Default Value| |--------|-----------|----|-------------| |title|The window title|String|"Development Server"| |theme|Use a predefined theme (Options are: "default", "dark", "material")|String|"default"| |template|Provide an alternative ejs template (overrides the theme option)|String|The predefined template used by the theme option| |disableWhenValid|Whether to stop showing the waitPage after the first compilation (otherwise, will continue to show on hot full page reloads)|Boolean|true

• These and any other option would be passed to the global scope of the ejs template.

Themes

There are other themes to choose from:

Dark

Material

*** And you can also create your own! ***

Developing a new template

You can clone this repository and use the script test to help you develop a new template.

• Create a new ejs file (e.g. my-theme.ejs)
• Change the webpack.config.js filename argument of testMiddleware to yours (e.g. testMiddleware('my-theme.ejs')).
• Run npm t

Template data object

The ejs renderer gets a data object with the following values:

{
    title: "Development Server", // the window title
    webpackVersion: "4.0.0", // currently used webpack version
    webpackServeVersion: "1.0.0", // currently used webpack-serve version
    progress: [ // number of object as number of webpack configurations
      [
        0.5, // progress between 0 to 1
        "message", // message from webpack
        "0/1000", // modules progress message
        "0 active", // active modules message
        "<some path>" // path of current module
      ]
    ]
}