{"id":17686,"library":"html-webpack-harddisk-plugin","title":"HTML Webpack Harddisk Plugin","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jantimon/html-webpack-harddisk-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","disk","template","typescript"],"install":[{"cmd":"npm install html-webpack-harddisk-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-webpack-harddisk-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-webpack-harddisk-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency to extend its functionality.","package":"html-webpack-plugin","optional":false},{"reason":"Required peer dependency as it's a webpack plugin.","package":"webpack","optional":false}],"imports":[{"note":"CommonJS `require` is shown in the official docs, suitable for webpack config files.","wrong":"import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';","symbol":"HtmlWebpackHarddiskPlugin","correct":"const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');"},{"note":"ES Modules `import` is also supported, especially if your webpack config uses ESM or for type imports.","wrong":"const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');","symbol":"HtmlWebpackHarddiskPlugin","correct":"import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';"},{"note":"For TypeScript users, import the `Options` type to define plugin configuration.","symbol":"Options","correct":"import type { Options } from 'html-webpack-harddisk-plugin';"}],"quickstart":{"code":"const path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html', // Ensure this file exists\n      filename: 'index.html',\n      alwaysWriteToDisk: true,\n    }),\n    new HtmlWebpackPlugin({\n      template: './src/another.html', // Ensure this file exists\n      filename: 'another.html',\n      alwaysWriteToDisk: true,\n    }),\n    new HtmlWebpackHarddiskPlugin({\n      // Optional: Set a custom output path, otherwise it uses webpack's output.path\n      // outputPath: path.resolve(__dirname, 'build/html')\n    })\n  ],\n  devServer: {\n    static: {\n      directory: path.join(__dirname, 'dist'),\n    },\n    compress: true,\n    port: 9000,\n  }\n};","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure `alwaysWriteToDisk: true` is part of the `HtmlWebpackPlugin` configuration object.","message":"The `alwaysWriteToDisk` option must be set on the `HtmlWebpackPlugin` instance(s), not on the `HtmlWebpackHarddiskPlugin` instance itself, for the functionality to be enabled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `new HtmlWebpackHarddiskPlugin()` only once to your `webpack.config.js` plugins array.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your Node.js environment to version 10.13.0 or newer.","message":"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.","severity":"breaking","affected_versions":"<10.13.0 (Node.js)"},{"fix":"Ensure `html-webpack-plugin` and `webpack` are updated to version 5.0.0 or higher in your project dependencies.","message":"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.","severity":"breaking","affected_versions":"<5.0.0 (html-webpack-plugin or webpack)"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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`.","cause":"The required peer dependency `html-webpack-plugin` is either not installed or its version does not meet the `^5.0.0` requirement.","error":"Error: Peer dependency html-webpack-plugin@^5.0.0 not found"},{"fix":"Change `plugins: [ HtmlWebpackHarddiskPlugin() ]` to `plugins: [ new HtmlWebpackHarddiskPlugin() ]`.","cause":"You forgot to use the `new` keyword when instantiating the plugin in your webpack configuration.","error":"TypeError: HtmlWebpackHarddiskPlugin is not a constructor"},{"fix":"Review your `webpack.config.js` to ensure the `plugins` array is correctly structured and all its elements are valid plugin instances.","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.","error":"TypeError: Cannot read properties of undefined (reading 'apply')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}