VuePress HTML Webpack Plugin

3.2.0 verified Sat Apr 25 auth: no javascript maintenance

A fork of html-webpack-plugin specifically for VuePress to avoid version conflicts when users install incompatible webpack versions alongside VuePress' own. Version 3.2.0 is the latest stable release. This plugin simplifies creation of HTML files to serve webpack bundles, especially useful for hashed filenames. Unlike the original, it is locked to specific webpack internals compatibility for VuePress. No frequent updates.

Common errors

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

cause Wrong package name; should be 'vuepress-html-webpack-plugin' in VuePress context.

fix

Replace require('html-webpack-plugin') with require('vuepress-html-webpack-plugin')

error Module not found: Error: Can't resolve 'webpack/lib/...' ↓

cause Webpack version mismatch, plugin accesses internal webpack modules.

fix

Ensure webpack version matches peer dependency: ^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0

Warnings

breaking This fork locks webpack peer dependency to 1.x-4.x; incompatible with webpack 5. ↓

fix Use original html-webpack-plugin for webpack 5, or stay on webpack 4.

gotcha Direct requires into webpack internals may break if webpack minor/patch version changes unexpectedly. ↓

fix Pin exact webpack version in your project.

Install

npm install vuepress-html-webpack-plugin

yarn add vuepress-html-webpack-plugin

pnpm add vuepress-html-webpack-plugin

Imports

HtmlWebpackPlugin

wrong

import HtmlWebpackPlugin from 'vuepress-html-webpack-plugin'

correct

const HtmlWebpackPlugin = require('vuepress-html-webpack-plugin')

CommonJS only; no ESM export at this version

HtmlWebpackPlugin

wrong

const { HtmlWebpackPlugin } = require('vuepress-html-webpack-plugin')

correct

const HtmlWebpackPlugin = require('vuepress-html-webpack-plugin')

Default export, not named export

Quickstart

Basic webpack configuration with HtmlWebpackPlugin to generate an HTML file.

const HtmlWebpackPlugin = require('vuepress-html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'index.html'
    })
  ]
};