A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/@vxna/mini-html-webpack-template below:

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

@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
        })
    })
  ]
}
Complex security features

SRI is out of scope of this project and it's recommended to use html-webpack-plugin with it's ecosystem tools.

Inspired by

html-webpack-template

License

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


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4