react-skeleton-webpack-plugin's Introduction

react-skeleton-webpack-plugin

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