mini-html-webpack-plugin

3.1.3 verified Sat Apr 25 auth: no javascript maintenance

A lightweight alternative to html-webpack-plugin for webpack 4 and 5, automating CSS and JS asset path injection into HTML templates. Current stable version 3.1.3 (October 2020) with no active development since. Supports multi-page setups via chunks, custom template functions, and HTML minification. Unlike html-webpack-plugin, it does not support plugins for html-webpack-plugin, making it simpler but less extensible. Written in TypeScript with bundled type definitions.

Common errors

error Cannot find module 'mini-html-webpack-plugin' ↓

cause Package not installed

fix

npm install mini-html-webpack-plugin

error MiniHtmlWebpackPlugin is not a constructor ↓

cause Using default require instead of named export

fix

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

error TypeError: MiniHtmlWebpackPlugin is not a constructor ↓

cause Using default import in ESM context

fix

Use import { MiniHtmlWebpackPlugin } from 'mini-html-webpack-plugin';

error Error: Hook not found: emit ↓

cause Using webpack 5 with plugin version <3.1.0

fix

Update to mini-html-webpack-plugin >=3.1.0

Warnings

breaking Drop default export to fix CommonJS (v3.0.5) ↓

fix Switch from default import/require to named export: const { MiniHtmlWebpackPlugin } = require(...)

breaking Webpack 5 compatibility: emit hook change ↓

fix Upgrade to v3.1.0+ for webpack 5 support

deprecated No updates since 2020; package is in maintenance mode ↓

fix Consider forking or switching to html-webpack-plugin if more features are needed

gotcha Does not work with html-webpack-plugin plugins (e.g., html-webpack-harddisk-plugin) ↓

fix Do not use those plugins; implement custom templates instead

gotcha Requires Node >=10 ↓

fix Use Node 10+

Install

npm install mini-html-webpack-plugin

yarn add mini-html-webpack-plugin

pnpm add mini-html-webpack-plugin

Imports

MiniHtmlWebpackPlugin

wrong

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

correct

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

CommonJS require extracts named export; default import was removed in v3.0.5.

generateAttributes

wrong

import generateAttributes from 'mini-html-webpack-plugin';

correct

import { generateAttributes } from 'mini-html-webpack-plugin';

ESM named export, not default.

generateCSSReferences

wrong

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

correct

import { generateCSSReferences } from 'mini-html-webpack-plugin';

Same as above; both named exports.

Quickstart

Basic setup with MiniHtmlWebpackPlugin: define webpack configuration, add plugin, run compiler.

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

const compiler = webpack({
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: { title: 'My App' },
      chunks: ['main']
    }),
  ],
});

compiler.run((err, stats) => {
  if (err) console.error(err);
  console.log(stats.toString({ colors: true }));
});