{"id":20393443,"url":"https://github.com/elisherer/webpack-dev-server-waitpage","last_synced_at":"2025-09-05T23:33:23.235Z","repository":{"id":32103082,"uuid":"131578224","full_name":"elisherer/webpack-dev-server-waitpage","owner":"elisherer","description":"Webpack progress wait page for webpack-dev-server","archived":false,"fork":false,"pushed_at":"2024-03-25T08:30:29.000Z","size":791,"stargazers_count":60,"open_issues_count":15,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-08T22:40:54.938Z","etag":null,"topics":["webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elisherer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-30T09:35:17.000Z","updated_at":"2025-03-03T15:23:27.000Z","dependencies_parsed_at":"2024-06-18T17:02:58.338Z","dependency_job_id":"0b435d7b-f254-4f46-aa27-5b00360dd1d3","html_url":"https://github.com/elisherer/webpack-dev-server-waitpage","commit_stats":{"total_commits":41,"total_committers":8,"mean_commits":5.125,"dds":"0.46341463414634143","last_synced_commit":"c6dad4f6b5f03a027e5bef8a3d95b7a9616f0294"},"previous_names":["elisherer/webpack-serve-waitpage"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/elisherer/webpack-dev-server-waitpage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisherer%2Fwebpack-dev-server-waitpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisherer%2Fwebpack-dev-server-waitpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisherer%2Fwebpack-dev-server-waitpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisherer%2Fwebpack-dev-server-waitpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elisherer","download_url":"https://codeload.github.com/elisherer/webpack-dev-server-waitpage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisherer%2Fwebpack-dev-server-waitpage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502387,"owners_count":23618587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack"],"created_at":"2024-11-15T03:48:54.064Z","updated_at":"2025-07-09T18:33:12.772Z","avatar_url":"https://github.com/elisherer.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/webpack-dev-server-waitpage.svg)](https://badge.fury.io/js/webpack-dev-server-waitpage)\r\n\r\n# webpack-dev-server-waitpage\r\nWebpack progress wait page for [webpack-dev-server](https://github.com/webpack/webpack-dev-server)\r\n\r\nInstead of waiting for webpack to finish compiling, see a nice progress wait page.\r\n\r\n![screenshot](screenshot.png)\r\n\r\n## Installation\r\n\r\nnpm\r\n```\r\nnpm install -D webpack-dev-server-waitpage\r\n```\r\n\r\nyarn\r\n```\r\nyarn add -D webpack-dev-server-waitpage\r\n```\r\n\r\n## Usage\r\n\r\n#### webpack.config.js\r\n\r\n1 - Add the plugin to the plugins array:\r\n```js\r\nconst webpackDevServerWaitpage = require('webpack-dev-server-waitpage');\r\n\r\n...\r\n  plugins: [\r\n     ...\r\n\r\n     webpackDevServerWaitpage.plugin(),\r\n  \r\n     ...\r\n  ] \r\n\r\n...\r\n```\r\n\r\n**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).\r\n\r\n2 - 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:\r\n\r\nwebpack-dev-server@3\r\n```js\r\nconst webpackDevServerWaitpage = require('webpack-dev-server-waitpage');\r\n\r\n...\r\n\r\n  devServer: {\r\n    before: (app, server) =\u003e {\r\n\r\n      // Be sure to pass the server argument from the arguments\r\n      app.use(webpackDevServerWaitpage(server));\r\n\r\n    }\r\n  }\r\n```\r\nwebpack-dev-server@4\r\n```js\r\nconst webpackDevServerWaitpage = require('webpack-dev-server-waitpage');\r\n\r\n...\r\n\r\n  devServer: {\r\n    onBeforeSetupMiddleware: server =\u003e {\r\n\r\n      // Be sure to pass the server argument from the arguments\r\n      server.app.use(webpackDevServerWaitpage(server, { theme: \"material\" }));\r\n\r\n    }\r\n  }\r\n\r\n```\r\nYou can also provide options object for the middleware as a second parameter (i.e. `app.use(webpackDevServerWaitpage(options, {})`) or omit it.\r\n\r\n#### Middleware options\r\n\r\n| Option |Description|Type|Default Value|\r\n|--------|-----------|----|-------------|\r\n|`title`|The window title|`String`|`\"Development Server\"`|\r\n|`theme`|Use a predefined theme (Options are: `\"default\"`, `\"dark\"`, `\"material\"`)|`String`|`\"default\"`|\r\n|`template`|Provide an alternative `ejs` template (overrides the `theme` option)|`String`|The predefined template used by the `theme` option|\r\n|`disableWhenValid`|Whether to stop showing the waitPage after the first compilation (otherwise, will continue to show on hot full page reloads)|`Boolean`|`true` \r\n|`ignore`|Rules 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\u003cRequest\u003e:Boolean / Array\u003cstring/RegExp/Function\u003e`|`null`\r\n\r\n* These and any other option would be passed to the global scope of the ejs template.\r\n\r\n\r\n## Themes\r\n\r\nThere are other themes to choose from:\r\n\r\nDark\r\n\r\n![Dark](screenshot3.png)\r\n\r\nMaterial\r\n\r\n![Material](screenshot2.png)\r\n\r\n### *** And you can also create your own! ***\r\n\r\n### Developing a new template\r\n\r\nYou can clone this repository and use the script `test` to help you develop a new template.\r\n- Create a new ejs file (e.g. `my-theme.ejs`)\r\n- Change the `webpack.config.js` filename argument of `testMiddleware` to yours (e.g. `testMiddleware('my-theme.ejs')`).\r\n- Run `npm t`\r\n\r\n#### Template data object\r\n\r\nThe `ejs` renderer gets a data object with the following values:\r\n```js\r\n{\r\n    title: \"Development Server\", // the window title\r\n    webpackVersion: \"4.0.0\", // currently used webpack version\r\n    webpackDevServerVersion: \"1.0.0\", // currently used webpack-dev-server version\r\n    progress: [ // number of object as number of webpack configurations\r\n      [\r\n        0.5, // progress between 0 to 1\r\n        \"message\", // message from webpack\r\n        \"0/1000\", // modules progress message\r\n        \"0 active\", // active modules message\r\n        \"\u003csome path\u003e\" // path of current module\r\n      ]\r\n    ]\r\n}\r\n```\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felisherer%2Fwebpack-dev-server-waitpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felisherer%2Fwebpack-dev-server-waitpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felisherer%2Fwebpack-dev-server-waitpage/lists"}