{"id":14965704,"url":"https://github.com/elemefe/page-skeleton-webpack-plugin","last_synced_at":"2025-05-15T10:05:26.573Z","repository":{"id":39916385,"uuid":"127401585","full_name":"ElemeFE/page-skeleton-webpack-plugin","owner":"ElemeFE","description":"Webpack plugin to generate the skeleton page automatically","archived":false,"fork":false,"pushed_at":"2020-04-21T14:16:26.000Z","size":25005,"stargazers_count":2794,"open_issues_count":100,"forks_count":394,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-05-15T10:04:02.858Z","etag":null,"topics":["page-skeleton","puppeteer","webpack-plugin"],"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/ElemeFE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-30T08:16:47.000Z","updated_at":"2025-04-16T00:52:06.000Z","dependencies_parsed_at":"2022-07-21T04:49:34.759Z","dependency_job_id":null,"html_url":"https://github.com/ElemeFE/page-skeleton-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fpage-skeleton-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fpage-skeleton-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fpage-skeleton-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fpage-skeleton-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/page-skeleton-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319718,"owners_count":22051072,"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":["page-skeleton","puppeteer","webpack-plugin"],"created_at":"2024-09-24T13:35:07.980Z","updated_at":"2025-05-15T10:05:21.526Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin/raw/master/docs/banner.jpg\" alt=\"mark text\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e:high_brightness:Automatically generate Skeleton Page:crescent_moon:\u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  A \u003ccode\u003eWebpack\u003c/code\u003e plugin helps you build better JavaScript application\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- Version --\u003e\n  \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin\"\u003e\n    \u003cimg src=\"https://badge.fury.io/gh/elemefe%2Fpage-skeleton-webpack-plugin.svg\" alt=\"website\"\u003e\n  \u003c/a\u003e\n  \u003c!-- License --\u003e\n  \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/ElemeFE/page-skeleton-webpack-plugin.svg?style=flat-square\" alt=\"LICENSE\"\u003e\n  \u003c/a\u003e\n  \u003c!-- Build Status --\u003e\n  \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin\"\u003e\n    \u003cimg src=\"https://travis-ci.org/ElemeFE/page-skeleton-webpack-plugin.svg?branch=master\" alt=\"build\"\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads monthly --\u003e\n  \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/page-skeleton-webpack-plugin.svg?style=flat-square\" alt=\"download\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003ca href=\"https://nodei.co/npm/page-skeleton-webpack-plugin/\"\u003e\u003cimg src=\"https://nodei.co/npm/page-skeleton-webpack-plugin.png?downloads=true\u0026downloadRank=true\u0026stars=true\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003ch3\u003e\n    \u003ca href=\"https://zhuanlan.zhihu.com/p/34702561\"\u003e\n      Blog\n    \u003c/a\u003e\n   \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin/blob/master/docs/i18n/zh_cn.md\"\u003e\n      中文\n    \u003c/a\u003e\n   \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#features\"\u003e\n      Features\n    \u003c/a\u003e\n   \u003cspan\u003e | \u003c/span\u003e\n​    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#examples\"\u003e\n      Examples\n    \u003c/a\u003e\n​    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#installation\"\u003e\n      Install\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#basic-use\"\u003e\n      Basic Use\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#documents\"\u003e\n      Documents\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/ElemeFE/page-skeleton-webpack-plugin#contribution\"\u003e\n      Contribution\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n![](https://github.com/ElemeFE/page-skeleton-webpack-plugin/raw/master/docs/workflow.gif)\n\n### Features\n\nPage Skeleton is a webpack plugin.The purpose of the plugin is to generate the corresponding skeleton screen page according to different route pages in your project, and to pack the skeleton screen page into the corresponding static route page through webpack.\n\n- Support multiple loading animations\n- Preview on mobile\n- Support multiple routes\n- Can be customized, and also directly modify the skeleton page source code in the preview page\n- Almost zero configuration available\n\n\u003ch4 align=\"center\"\u003eLoading animations\u003c/h4\u003e\n\n| Spin | Shine | Chiaroscuro |\n|:---:|:---:|:---:|\n| ![](./docs/spin.gif) | ![](./docs/shine.gif) | ![](./docs/chiaroscuro.gif) |\n\n_speed up play_\n\n### Examples\n\nAll examples are in the `examples` folder.\n\n* [**sale**](https://github.com/ElemeFE/page-skeleton-webpack-plugin/tree/master/examples/sale)\n\n### Installation\n\nUse `npm` to install this plugin, and you also need to install [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).\n\n\u003e npm install --save-dev page-skeleton-webpack-plugin\n\u003e \n\u003e npm install --save-dev html-webpack-plugin\n\n### Basic Use\n\n**Step 1：configration**\n\nAfter installing the plug-in according to the above tutorial, you need to configure the plugin so that the plugin can run normally. The plugin will perform different operations depending on the environment of the node. When `NODE_ENV === 'development'`, the plug-in can perform operations for generating and writing skeleton pages.\n\n```javascript\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst { SkeletonPlugin } = require('page-skeleton-webpack-plugin')\nconst path = require('path')\nconst webpackConfig = {\n  entry: 'index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'index.bundle.js'\n  },\n  plugin: [\n    new HtmlWebpackPlugin({\n       // Your HtmlWebpackPlugin config\n    }),\n    new SkeletonPlugin({\n        pathname: path.resolve(__dirname, `${customPath}`), // the path to store shell file\n        staticDir: path.resolve(__dirname, './dist'), // the same as the `output.path`\n        routes: ['/', '/search'], // Which routes you want to generate skeleton screen\n    })\n  ]\n}\n```\n\n:notebook_with_decorative_cover:Since the plugin selects different operations based on the `process.env.NODE_ENV` environment variable, so you need to configurate environment variables in the `scripts` option in the `package.json` file as follows:\n\n```json\n\"scripts\": {\n  \"dev\": \"cross-env NODE_ENV=development node server.js\",\n  \"build\": \"rm -rf dist \u0026\u0026 cross-env NODE_ENV=production webpack --progress --hide-modules\"\n}\n```\n\nThat is, setting `NODE_ENV` to `development` in the development environment and `NODE_ENV` to `production` in the production environment.\n\n#### Step 2：Modify template `index.html` of html-webpack-plugin\n\nAdd comment `\u003c!-- shell --\u003e` in the root element of you application.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003c!-- shell --\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Step 3：Operations and write shell\n\nIn the development page, use CtrlOrCmd + enter to call out the plugin interactive interface, or enter the `toggleBar` callout interface in the browser's JavaScript console.\n\n![](./docs/step1.jpg)\n\nClick the button in the interactive interface to preview the skeleton page. This process may take about 20s. After the plugin is ready for the skeleton page, it will automatically open the preview page through the browser, as shown below.\n\n![](./docs/step2.jpg)\n\nScan the QR code in the preview page to preview the skeleton page on the mobile phone. You can directly edit the source code on the preview page. Write the skeleton page into the shell.html file by clicking the Write button in the upper right corner.\n\nRe-package the application with webpack. When the page is restarted, you can see the application's skeleton structure before getting the data.\n\n### Documents\n\n**Server Options**\n\n| Option    | Type            | Required? | Default      | Description                                                  |\n| --------- | --------------- | --------- | ------------ | ------------------------------------------------------------ |\n| pathname  | String          | Yes       | None         | Where the shell.html file shoud be output.                   |\n| staticDir | String          | Yes       | None         | Path to output static route page                             |\n| routes    | Array           | Yes       | None         | Route in `routes ` will generate static route with skeleton screen, please refer to [**sale**](https://github.com/ElemeFE/page-skeleton-webpack-plugin/tree/master/examples/sale) |\n| Port      | String          | No        | 8989         | The port of Page Skeleton server                             |\n| debug     | Boolean         | No        | `true`       | Whether debug mode is enabled or not, when debug is true, the output of the headless Chromium console will be output on the terminal. |\n| minify    | false or Object | No        | See defaults | The plug-in will uglify the generated shell.html file by default. You can pass [html-minifier](https://github.com/kangax/html-minifier) configuration parameters to mimify shell.html. When configured to false , the generated shell.html file is not uglified and the shell.html file is formatted. |\n| logLevel  | String          | No        | `info`       | Which type of messages you want to print in terminal, the optional values are `info`, `warn` and default value is `info`. |\n| quiet     | Boolean         | No        | `false`      | Whether to print messages on the terminal, when set to true, no messages are printed. |\n| noInfo    | Boolean         | No        | `false`      | When the value is `true`, plugin will not print `info` message. |\n| logTime   | Boolean         | No        | `true`       | Print formatted time before the message.                     |\n\n**Skeleton Page Options**\n\n| Option    | Type   | Required | Default      | Description                                                  |\n| --------- | ------ | -------- | ------------ | ------------------------------------------------------------ |\n| loading   | String | No       | spin         | Animations of skeleton page,  enumerated values:`spin` `chiaroscuro` `shine` |\n| text      | Object | No       | See defaults | The configuration object can be configured with a color field that determines the color of the text block in the skeleton page. The color value supports hexadecimal, RGB, and so on. |\n| image     | Object | No       | See defaults | This configuration accepts 3 properties, color, shape, and shapeOpposite. Color and shape are used to determine the color and shape of the image block in the skeleton page. The color value supports hexadecimal and RGB. The shape supports two enumeration values, `circle` and `rect`. The shapeOpposite field takes an array. Each element in the array is a DOM selector. It is used to select the DOM element. The shape of the selected DOM will be opposite to the configured shape. For example, if the configuration is rect, the image block in the shapeOpposite will be In the skeleton page is displayed as a circle shape (circular), how to configure can refer to the default configuration at the end of this section. |\n| button    | Object | No       | See defaults | This configuration accepts two fields, `color` and `excludes`. Color is used to determine the color of the button block in the skeleton page. excludes accepts an array. The elements in the array are DOM selectors used to select elements. The elements in the array will not be considered button blocks. |\n| svg       | Object | No       | See defaults | This configuration accepts 3 fields, `color`, `shape`, and `shapeOpposite`. Color and shape are used to determine the color and shape of the svg block in the skeleton page. The color value supports hexadecimal and RGB, and also supports the `transparent` enumeration value. After setting to transparent, the svg block will be a transparent block. Shapes support two enumeration values, `circle` and `rect`. The shapeOpposite field accepts an array. Each element in the array is a DOM selector for selecting the DOM element. The shape of the selected DOM will be the opposite of the configured shape shape. For example, if the configuration is rect then the svg block in the shapeOpposite will be In the skeleton page is displayed as a circle shape (circular). |\n| pseudo    | Object | No       | See defaults | This configuration accepts two fields, `color` and `shape`. Color is used to determine the color of the skeletal page that is treated as a pseudo-element block, and shape is used to set the shape of the pseudo-element block, accepting two enum values: `circle` and `rect`. |\n| excludes  | Array  | No       | `[]`         | If you have an element that does not require skeleton processing, write the element's CSS selector in the array. |\n| remove    | Array  | No       | `[]`         | If you have elements that need to be removed from the DOM are configured with a CSS selector that will be removed in DOM tree. |\n| hide      | Array  | No       | `[]`         | Don't want to remove it, but hide the element by setting its transparency to 0 and config element's CSS selector in the array. |\n| grayBlock | Array  | No       | `[]`         | The elements in the array are CSS selectors. The selected element will be processed by the plug-in into a color block. The color of the color block is the same as the color of the button block. Internal elements will no longer be specially treated and text will be hidden. |\n| cssUnit   | String | No       | `rem`        | The enum values it accepts are `rem`, `vw`, `vh`, `vmin`, `vmax`. |\n| decimal   | Number | No       | 4            | Config the decimal of the css value in the skeleton page (shell.html). The default value is 4. |\n\n**Puppeteer Options**\n\n| Options | Type   | Required? | Default         | Description                                                  |\n| ------- | ------ | --------- | --------------- | ------------------------------------------------------------ |\n| device  | String | No        | `iPhone 6 Plus` | Used to set which mobile device simulator to generate the skeleton page. Refer to [puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js) for configuration. |\n| defer   | Number | No        | 5000            | Puppeteer starts the headless Chrome browser. The delay after opening the page is mainly to ensure that the page is fully loaded and the unit is `ms`. |\n| cookie  | Array  | No        | `[]`            | Refer to [puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js). |\n| storagies | Object | No      | `{}`            | LocalStorage\n| sessionStoragies | Object | No      | `{}`     | SessionStorage\n\n**Default options**\n\n```javascript\nconst pluginDefaultConfig = {\n  port: '8989',\n  text: {\n    color: '#EEEEEE'\n  },\n  image: {\n    shape: 'rect', // `rect` | `circle`\n    color: '#EFEFEF',\n    shapeOpposite: []\n  },\n  button: {\n    color: '#EFEFEF',\n    excludes: [] \n  },\n  svg: {\n    color: '#EFEFEF',\n    shape: 'circle', // circle | rect\n    shapeOpposite: []\n  },\n  pseudo: {\n    color: '#EFEFEF', // or transparent\n    shape: 'circle' // circle | rect\n  },\n  device: 'iPhone 6 Plus',\n  debug: false,\n  minify: {\n    minifyCSS: { level: 2 },\n    removeComments: true,\n    removeAttributeQuotes: true,\n    removeEmptyAttributes: false\n  },\n  defer: 5000,\n  excludes: [],\n  remove: [],\n  hide: [],\n  grayBlock: [],\n  cookies: [],\n  storagies: {},\n  sessionStoragies: {},\n  cssUnit: 'rem',\n  decimal: 4,\n  logLevel: 'info',\n  quiet: false,\n  noInfo: false,\n  logTime: true\n}\n```\n\n### Contribution\n\nThe project is under active development. If you have any questions, please submit your issues. Please refer to the issue template to submit the issue. If you are fixing a bug in the issues, please discuss it in the issue before submit the PR. If it is a new feature, submit a feature-related issue first before submit the PR.\n\nThere are three main development folders in the project:\n\n- client: Used to communicate between development projects and plugin server.\n- preview: The code of the preview page.\n- src: plugin server code.\n     - script: script to generate the skeleton page.\n\nSpecial thanks to @Yasujizr who designed the banner of Page Skeleton.\n\n**Maintainer**\n\n[![Jocs](https://avatars0.githubusercontent.com/u/9712830?s=150\u0026v=4)](https://github.com/Jocs)\n\n### License\n\n [**MIT**](https://github.com/ElemeFE/page-skeleton-webpack-plugin/blob/master/LICENSE).\n\nCopyright (c) 2017-present, @ElemeFE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemefe%2Fpage-skeleton-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felemefe%2Fpage-skeleton-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemefe%2Fpage-skeleton-webpack-plugin/lists"}