Home

Awesome

npm version

webpack-dev-server-waitpage

Webpack progress wait page for webpack-dev-server

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

screenshot

Installation

npm

npm install -D webpack-dev-server-waitpage

yarn

yarn add -D webpack-dev-server-waitpage

Usage

webpack.config.js

1 - Add the plugin to the plugins array:

const webpackDevServerWaitpage = require('webpack-dev-server-waitpage');

...
  plugins: [
     ...

     webpackDevServerWaitpage.plugin(),
  
     ...
  ] 

...

Note: Arguments for the plugin method are the same as the object that can be passed to ProgressPlugin besides the handler function which is used internally (it is best to leave it blank).

2 - Inside the before/onBeforeSetupMiddleware (depending on which version of webpack-dev-server you are using) option function of devServer enter the following line as in the example below:

webpack-dev-server@3

const webpackDevServerWaitpage = require('webpack-dev-server-waitpage');

...

  devServer: {
    before: (app, server) => {

      // Be sure to pass the server argument from the arguments
      app.use(webpackDevServerWaitpage(server));

    }
  }

webpack-dev-server@4

const webpackDevServerWaitpage = require('webpack-dev-server-waitpage');

...

  devServer: {
    onBeforeSetupMiddleware: server => {

      // Be sure to pass the server argument from the arguments
      server.app.use(webpackDevServerWaitpage(server, { theme: "material" }));

    }
  }

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

Middleware options

OptionDescriptionTypeDefault Value
titleThe window titleString"Development Server"
themeUse a predefined theme (Options are: "default", "dark", "material")String"default"
templateProvide an alternative ejs template (overrides the theme option)StringThe predefined template used by the theme option
disableWhenValidWhether to stop showing the waitPage after the first compilation (otherwise, will continue to show on hot full page reloads)Booleantrue
ignoreRules to ignore certain url or requests. (String and RegExp are matched vs req.url, while Functions gets the express request as argument)string / RegExp / Function<Request>:Boolean / Array<string/RegExp/Function>null

Themes

There are other themes to choose from:

Dark

Dark

Material

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.

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
    webpackDevServerVersion: "1.0.0", // currently used webpack-dev-server 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
      ]
    ]
}