skeleton-webpack-plugin

This webpack plugin is designed for generate the skeleton placeholding for your page.

how to use

Before using this webpack plugin,what you need do is installing it.You could install this plugin through following two ways:

npm i skeleton-webpack-plugin --save-dev

yarn add skeleton-webpack-plugin --dev

After installing this plugin,you could use it in your development env webpack config like this example:

const SkeletonWebpackPlugin = require('skeleton-webpack-plugin')
cosnt HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: 'index.js',
  mode: 'development',
  output: {
    path: 'dist',
    filename: 'index.bundle.js'
  },
  plugins: [
    new SkeletonWebpackPlugin({
      outDir: __dirname,
      projectDir: __dirname,
      plugins: []
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: true
    })
  ]
}

When you start your dev server and open your page, open your console and input skeleton,then press enter keyboard key.

skeleton-webpack-plugin will generate the skeleton file in the outDir you assign.

Configuration

skeleton-webpack-plugin constructor could accept three config options and only two of them is necessary.

outDir: The output path of the generated skeleton page html file
projectDir: The directory of your project.
plugins: The plugins to transform skeketon html and css to generate skeleton code of other terminals, such as react native, weex and so on.

how to develop skeleton plugin

The plugin of skeleton-webpack-plugin is a function, which get three arguments. for example:

function exampleSkeletonPlugin (astInfo, route, projectDir) {
astInfo = {
  html: {
      ast: htmlAst,
      stringify: htmlStringify
    },
    css: {
      ast: cssAst,
      stringify: cssStringify
    }
}
route = window.location.pathname
// you can do something in this function to transform the skeleton html and css to other terminal code
}

astInfo param contains abstract syntax tree of the skeleton html and css, the htmlStringify and cssStringify is the stringify function.

The format of htmlAst as follows:

<div class='post post-featured'>
  <p>Himalaya parsed me...</p>
  <!-- ...and I liked it. -->
</div>

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

The format of cssAst as follows:

body {
  background: #eee;
  color: #888;
}

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          "body"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "background",
            "value": "#eee",
            "position": {
              "start": {
                "line": 2,
                "column": 3
              },
              "end": {
                "line": 2,
                "column": 19
              }
            }
          },
          {
            "type": "declaration",
            "property": "color",
            "value": "#888",
            "position": {
              "start": {
                "line": 3,
                "column": 3
              },
              "end": {
                "line": 3,
                "column": 14
              }
            }
          }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 4,
            "column": 2
          }
        }
      }
    ]
  }
}

Through this plugin,you could generate skeleton page of multiple terminal automatically.

skeleton-webpack-plugin