open-index/open-npm huggingface dataset:
npm package: @maiscrm/html-skeleton-webpack-plugin
Description: This is a plugin to help webpack to inject skeleton element and CSS asset into html.
Latest version: 0.1.1

[![npm][npm]][npm-url]

# html-skeleton-webpack-plugin

This is a plugin to help webpack to inject skeleton element and CSS asset into html.

## Usage

**webpack.config.js**
```js
const HtmlSkeletonWebpackPlugin = require('html-skeleton-webpack-plugin');

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlSkeletonWebpackPlugin({
      cssFilename: 'css/[name].[contenthash].css',
      template: path.resolve(__dirname, 'src/skeleton.vue'),
    }),
  ]
}
```

**index.html**
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id="app">
      <!-- inject-skeleton -->
    </div>
  </body>
</html>
```

This will inject skeleton element into *\<!-- inject-skeleton -->* and insert CSS assets into html head

## Options

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`cssFilename`**|`{String}`|`'sekeleton.[contenthash].css'`|The file to write the CSS asset to. Defaults to `sekeleton.[contenthash].css`.|
|**`template`**|`{String}`||Relative or absolute path to the skeleton template. By default it will use the default loading template.|

## Preview

![preview](./docs/preview.gif)


[npm]: https://img.shields.io/npm/v/@maiscrm/html-skeleton-webpack-plugin.svg
[npm-url]: https://www.npmjs.com/package/@maiscrm/html-skeleton-webpack-plugin