webpack-serve-waitpage

Webpack progress wait page for webpack-serve

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 addoption function of serveenter 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

OptionDescriptionTypeDefault Value
titleThe window titleString"Development Server"
themeUse a predefined theme (Options are: "default", "dark", "material")String"default"
templateProvide an alternative ejstemplate (overrides the themeoption)StringThe predefined template used by the themeoption
disableWhenValidWhether to stop showing the waitPage after the first compilation (otherwise, will continue to show on hot full page reloads)Booleantrue
  • 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 testto help you develop a new template.

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

Template data object

The ejsrenderer 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
      ]
    ]
}

Repository

https://github.com/elisherer/webpack-serve-waitpage.git


上一篇:vue 3-新特性预览
下一篇:深入浅出react和redux笔记

相关推荐

官方社区

扫码加入 JavaScript 社区