@vxna/mini-html-webpack-template

@vxna/mini-html-webpack-template

Template for mini-html-webpack-plugin that extends default features with useful subset of options

Warning

It does not work with html-webpack-plugin

Common usage

webpack.config.js

const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: {
        title: 'common-usage',
        container: 'root',
        trimWhitespace: true
      },
      template: require('@vxna/mini-html-webpack-template')
    })
  ]
}

Common options

Name	Type	Default	Description
lang	{String}	undefined	Set document language
title	{String}	'sample-app'	Set document title
container	{String}	undefined	Set application mount point
trimWhitespace	{Boolean}	undefined	Safe document whitespace reduction

Extended usage

webpack.config.js

const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: {
        title: 'extended-usage',
        head: {
          meta: [
            {
              name: 'description',
              content: 'mini-html-webpack-template'
            },
            {
              property: 'og:description',
              content: 'mini-html-webpack-template'
            }
          ],
          links: [
            {
              rel: 'shortcut icon',
              href: 'https://assets-cdn.github.com/favicon.ico',
              type: 'image/x-icon'
            }
          ]
        },
        body: {
          raw: '<div id="root"></div>'
        }
      },
      template: require('@vxna/mini-html-webpack-template')
    })
  ]
}

Extended options

Name	Type	Default	Description
head.meta	{Array}	undefined	Array of objects with key + value pairs
head.links	{Array}	undefined	Array of objects with key + value pairs
head.scripts	{Array}	undefined	Array of objects with key + value pairs
head.raw	{Array|String}	undefined	Raw document markup
body.scripts	{Array}	undefined	Array of objects with key + value pairs
body.raw	{Array|String}	undefined	Raw document markup

Extended minification

For custom needs html-minifier middleware and all of it's options could be used

webpack.config.js

const { minify } = require('html-minifier')
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: {
        title: 'extended-minification'
      },
      template: ctx =>
        minify(require('@vxna/mini-html-webpack-template')(ctx), {
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true
        })
    })
  ]
}

Inspired by

html-webpack-template

License

MIT (http://www.opensource.org/licenses/mit-license.php)