Nuns Practicing Misanthropy

    react-skeleton-webpack-plugin

    1.0.0 • Public • Published

    react-skeleton-webpack-plugin

    npm (scoped with tag) Build Status Coverage Status NPM downloads

    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.

    Keywords

    none

    Install

    npm i react-skeleton-webpack-plugin

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    23.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • panyuqi