react-skeleton-webpack-plugin

English|中文

This is a Webpack plugin based on React which generates Skeleton Screen for SPA and MPA. A Skeleton Screen includes DOM and Styles inlined in HTML during the building process.

Vue Version

Getting Started

Install：

npm install react-skeleton-webpack-plugin

Run test cases：

npm run test

Use in Webpack：

// webpack.config.js
 
import SkeletonWebpackPlugin from 'react-skeleton-webpack-plugin';
 
plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: require('./webpack.skeleton.conf')
    })
]

A Webpack config for Skeleton is also required:

// webpack.skeleton.conf
 
module.exports = merge(baseWebpackConfig, {
    target: 'node',
    devtool: false,
    entry: {
        app: resolve('./src/entry-skeleton.js')
    },
    output: Object.assign({}, baseWebpackConfig.output, {
        libraryTarget: 'commonjs2'
    }),
    externals: nodeExternals({
        whitelist: /\.css$/
    }),
    module: {
        rules: utils.styleLoaders({
            sourceMap: false,
            extract: true
        })
    },
    plugins: []
});

The entry file entry-skeleton.js uses React SSR to render Skeleton component：

// entry-skeleton.js
 
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import Skeleton from './Skeleton';
 
let html = ReactDOMServer.renderToStaticMarkup(<Skeleton />);
 
export default html;

Options for Plugin

This plugin support following options：

• webpackConfig required, a Webpack config for Skeleton
• insertAfter optional, mounting point to inject Skeleton DOM，default value is '<div id="app">'
• router optional, used by multi-skeleton in SPA
  • mode, router mode, history|hash
  • routes, an array for routes, every route object contains:
    • path, route path
    • skeletonId, the id of Skeleton DOM
• minimize optional minimize the JS code inject in HTML, default value is true

Examples

See examples.

• Single Skeleton in SPA
• MPA
• Multi Skeleton in SPA