@maiscrm/html-skeleton-webpack-plugin

0.1.1 • Public • Published

npm

html-skeleton-webpack-plugin

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

Usage

webpack.config.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

<!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

Package Sidebar

Install

npm i @maiscrm/html-skeleton-webpack-plugin

Weekly Downloads

3

Version

0.1.1

License

MIT

Unpacked Size

9.46 kB

Total Files

6

Last publish

Collaborators

  • maiscrm-sre
  • inetfuture
  • allenli
  • rob.gu
  • zack.sun