Webpack plugin helps you build better JavaScript application
Features
Page 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.
- Support multiple loading animations
- Preview on mobile
- Support multiple routes
- Can be customized, and also directly modify the skeleton page source code in the preview page
- Almost zero configuration available
Loading animations
| Spin | Shine | Chiaroscuro |
|---|---|---|
 |
 |
 |
speed up play
Examples
All examples are in the examples folder.
Installation
Use npm to install this plugin, and you also need to install html-webpack-plugin.
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
Basic Use
Step 1：configration
After 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.
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')
const webpackConfig = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index.bundle.js'
},
plugin: [
new HtmlWebpackPlugin({
// Your HtmlWebpackPlugin config
}),
new SkeletonPlugin({
pathname: path.resolve(__dirname, `${customPath}`), // the path to store shell file
staticDir: path.resolve(__dirname, './dist'), // the same as the `output.path`
routes: ['/', '/search'], // Which routes you want to generate skeleton screen
})
]
}process.env.NODE_ENV environment variable, so you need to configurate environment variables in the scripts option in the package.json file as follows:
"scripts": {
"dev": "cross-env NODE_ENV=development node server.js",
"build": "rm -rf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
}That is, setting NODE_ENV to development in the development environment and NODE_ENV to production in the production environment.
Step 2：Modify template index.html of html-webpack-plugin
Add comment <!-- shell --> in the root element of you application.