Package Exports

mini-html-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mini-html-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features

The plugin writes CSS and JS asset paths for you automatically. Works with webpack 3 and 4.

It does not work with html-webpack-plugin plugins!

Usage

npm install mini-html-webpack-plugin

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

const config = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      // Optional, defaults to `index.html`
      filename: 'demo.html',
      // Optional
      publicPath: 'demo/',
      context: {
        title: 'Webpack demo',
        // Optional, defaults to `{ lang: 'en' }`
        htmlAttributes: { lang: 'en' },
        // Optional
        cssAttributes: { rel: 'preload' },
        // Optional
        jsAttributes: { defer: 'defer' }
      }
    })
  ]
};

HTML minification

const minify = require('html-minifier').minify;
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');

const config = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: {
        title: 'Minification demo'
      },
      template: context =>
        minify(MiniHtmlWebpackPlugin.defaultTemplate(context))
    })
  ]
};

Custom templates

Use @vxna/mini-html-webpack-template to add an app container div, a favicon, meta tags, inline JavaScript or CSS.

Or define a template function to generate your own code:

const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
const {
  generateAttributes,
  generateCSSReferences,
  generateJSReferences
} = MiniHtmlWebpackPlugin;

const config = {
  plugins: [
    new MiniHtmlWebpackPlugin({
      filename: 'demo.html',
      publicPath: 'demo/',
      // `context` is available in `template` below
      context: {
        title: 'Webpack demo',
        htmlAttributes: { lang: 'en' },
        cssAttributes: { rel: 'preload' },
        jsAttributes: { defer: 'defer' }
      },
      template: ({
        css,
        js,
        publicPath,
        title,
        htmlAttributes,
        cssAttributes,
        jsAttributes
      }) => {
        const htmlAttrs = generateAttributes(htmlAttributes);

        const cssTags = generateCSSReferences({
          files: css,
          attributes: cssAttributes,
          publicPath
        });

        const jsTags = generateJSReferences({
          files: js,
          attributes: jsAttributes,
          publicPath
        });

        return `<!DOCTYPE html>
        <html${htmlAttrs}>
          <head>
            <meta charset="UTF-8">
            <title>${title}</title>
            ${cssTags}
          </head>
          <body>
            ${jsTags}
          </body>
        </html>`;
      }
    })
  ]
};

License

MIT.