Minimum viable template for mini-html-webpack-plugin

Package: @vxna/mini-html-webpack-template

Created by: vxna

Last modified: Thu, 07 Apr 2022 11:36:12 GMT

Version: 2.0.0

License: MIT

Downloads: 295,871

Repository: https://github.com/vxna/mini-html-webpack-template

Install

npm install @vxna/mini-html-webpack-template

yarn add @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',
        favicon: 'https://assets-cdn.github.com/favicon.ico',
        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
`favicon`	`{String}`	`undefined`	Set document favicon
`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'
            }
          ]
        },
        body: {
          raw: '<div id="root"></div>'
        },
        attrs: {
          js: {
            async: '',
            type: 'text/javascript'
          }
        }
      },
      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`	Generates raw document markup
`body.scripts`	`{Array}`	`undefined`	Array of objects with key + value pairs
`body.raw`	`{Array\|String}`	`undefined`	Generates raw document markup
`attrs.js`	`{Object}`	`undefined`	Applies html attributes to webpack output
`attrs.css`	`{Object}`	`undefined`	Applies html attributes to webpack output

Advanced 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: 'advanced-minification'
      },
      template: ctx =>
        minify(require('@vxna/mini-html-webpack-template')(ctx), {
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true
        })
    })
  ]
}