## skeleton-webpack-plugin  

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

[中文文档戳这里](https://github.com/NealST/skeleton-webpack-plugin/blob/master/README.CN.md)

### 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
```  

or  

```
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. 
![](https://pt-starimg.didistatic.com/static/starimg/img/lNniMvF5XL1558089977378.jpg)

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.