HTML Webpack Harddisk Plugin

2.0.0 verified Thu Apr 23 auth: no javascript

The `html-webpack-harddisk-plugin` is an extension for `html-webpack-plugin`, specifically designed to ensure that generated HTML files are written to the hard disk, even when using Webpack's development server or middleware. While `html-webpack-plugin` typically serves assets from memory in development, this plugin forces physical file creation. Currently at version 2.0.0, it maintains a stable release cadence, often aligning with major updates to its peer dependencies, `html-webpack-plugin` (v5+) and `webpack` (v5+). Its primary differentiator is its focused utility in scenarios where external tools or services require access to the actual HTML files on disk during the development workflow, such as for server-side rendering setups or specific build integrations, rather than just in-memory representations.

Common errors

error Error: Peer dependency html-webpack-plugin@^5.0.0 not found ↓

cause The required peer dependency `html-webpack-plugin` is either not installed or its version does not meet the `^5.0.0` requirement.

fix

Install or update html-webpack-plugin: npm install html-webpack-plugin@^5.0.0 --save-dev or yarn add html-webpack-plugin@^5.0.0 --dev.

error TypeError: HtmlWebpackHarddiskPlugin is not a constructor ↓

cause You forgot to use the `new` keyword when instantiating the plugin in your webpack configuration.

fix

Change plugins: [ HtmlWebpackHarddiskPlugin() ] to plugins: [ new HtmlWebpackHarddiskPlugin() ].

error TypeError: Cannot read properties of undefined (reading 'apply') ↓

cause This error typically occurs if the `plugins` array in your webpack configuration is not correctly defined or contains `undefined` entries, preventing Webpack from properly initializing plugins.

fix

Review your webpack.config.js to ensure the plugins array is correctly structured and all its elements are valid plugin instances.

Warnings

gotcha The `alwaysWriteToDisk` option must be set on the `HtmlWebpackPlugin` instance(s), not on the `HtmlWebpackHarddiskPlugin` instance itself, for the functionality to be enabled. ↓

fix Ensure `alwaysWriteToDisk: true` is part of the `HtmlWebpackPlugin` configuration object.

gotcha Only instantiate `HtmlWebpackHarddiskPlugin` once in your `plugins` array, regardless of how many `HtmlWebpackPlugin` instances you have. Multiple instances of `HtmlWebpackHarddiskPlugin` are unnecessary and can lead to unexpected behavior. ↓

fix Add `new HtmlWebpackHarddiskPlugin()` only once to your `webpack.config.js` plugins array.

breaking This package requires Node.js version 10.13 or higher due to its internal dependencies and Webpack 5 compatibility. Older Node.js versions will not be supported. ↓

fix Upgrade your Node.js environment to version 10.13.0 or newer.

breaking The plugin has peer dependencies on `html-webpack-plugin` version `^5.0.0` and `webpack` version `^5.0.0`. Using older versions of these packages will result in warnings or errors. ↓

fix Ensure `html-webpack-plugin` and `webpack` are updated to version 5.0.0 or higher in your project dependencies.

Install

npm install html-webpack-harddisk-plugin

yarn add html-webpack-harddisk-plugin

pnpm add html-webpack-harddisk-plugin

Imports

HtmlWebpackHarddiskPlugin

wrong

import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';

correct

const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

CommonJS `require` is shown in the official docs, suitable for webpack config files.

HtmlWebpackHarddiskPlugin

wrong

const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

correct

import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';

ES Modules `import` is also supported, especially if your webpack config uses ESM or for type imports.

Options
```
import type { Options } from 'html-webpack-harddisk-plugin';
```
For TypeScript users, import the `Options` type to define plugin configuration.

Quickstart

This configuration demonstrates how to integrate the plugin with two instances of `html-webpack-plugin`, forcing both 'index.html' and 'another.html' to be written to disk during development.

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Ensure this file exists
      filename: 'index.html',
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackPlugin({
      template: './src/another.html', // Ensure this file exists
      filename: 'another.html',
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackHarddiskPlugin({
      // Optional: Set a custom output path, otherwise it uses webpack's output.path
      // outputPath: path.resolve(__dirname, 'build/html')
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  }
};