Registry /
devops / html-webpack-harddisk-plugin
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
HtmlWebpackHarddiskPlugin
✓ const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
✗ import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';
CommonJS `require` is shown in the official docs, suitable for webpack config files.
HtmlWebpackHarddiskPlugin
✓ import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';
✗ const HtmlWebpackHarddiskPlugin = require('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.
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,
}
};
Debug
Known issues
gotchaThe `alwaysWriteToDisk` option must be set on the `HtmlWebpackPlugin` instance(s), not on the `HtmlWebpackHarddiskPlugin` instance itself, for the functionality to be enabled.fixEnsure `alwaysWriteToDisk: true` is part of the `HtmlWebpackPlugin` configuration object.
affects: >=1.0.0
gotchaOnly 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.fixAdd `new HtmlWebpackHarddiskPlugin()` only once to your `webpack.config.js` plugins array.
affects: >=1.0.0
breakingThis 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.fixUpgrade your Node.js environment to version 10.13.0 or newer.
affects: <10.13.0 (Node.js)
breakingThe 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.fixEnsure `html-webpack-plugin` and `webpack` are updated to version 5.0.0 or higher in your project dependencies.
affects: <5.0.0 (html-webpack-plugin or webpack)
Errors
Common errors & fixes
Error: Peer dependency html-webpack-plugin@^5.0.0 not found
The required peer dependency `html-webpack-plugin` is either not installed or its version does not meet the `^5.0.0` requirement.
fixInstall 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`.
TypeError: HtmlWebpackHarddiskPlugin is not a constructor
You forgot to use the `new` keyword when instantiating the plugin in your webpack configuration.
fixChange `plugins: [ HtmlWebpackHarddiskPlugin() ]` to `plugins: [ new HtmlWebpackHarddiskPlugin() ]`.
TypeError: Cannot read properties of undefined (reading 'apply')
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.
fixReview your `webpack.config.js` to ensure the `plugins` array is correctly structured and all its elements are valid plugin instances.
Audit
Dependencies
html-webpack-pluginrequiredRequired peer dependency to extend its functionality.
webpackrequiredRequired peer dependency as it's a webpack plugin.