{"id":20112,"library":"html-webpack-plugin","title":"HTML Webpack Plugin","description":"Plugin that simplifies creation of HTML files to serve your webpack bundles, especially useful for bundles with hashed filenames. Current stable version: 5.6.7. The plugin generates an HTML file for you, or you can provide your own template using lodash templates. It injects all webpack bundles into the HTML and supports a rich event system for extensibility. Key differentiators: zero-config setup, hooks for custom plugins, and support for multiple HTML files. Alternatives like HtmlBundlerPlugin or script-ext-html-webpack-plugin build on top of this. Actively maintained with frequent releases.","status":"active","version":"5.6.7","language":"javascript","source_language":"en","source_url":"https://github.com/jantimon/html-webpack-plugin","tags":["javascript","webpack","plugin","html","html-webpack-plugin","typescript"],"install":[{"cmd":"npm install html-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires webpack ^5.20.0 for v5","package":"webpack","optional":false},{"reason":"peer dependency: optional support for rspack","package":"@rspack/core","optional":true}],"imports":[{"note":"Default export. ESM works in Node 12+ with webpack. CJS via require also works.","wrong":"const HtmlWebpackPlugin = require('html-webpack-plugin')","symbol":"HtmlWebpackPlugin","correct":"import HtmlWebpackPlugin from 'html-webpack-plugin'"},{"note":"CommonJS require is also supported.","symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin')"},{"note":"Instantiate after import. Do not call require directly in constructor.","wrong":"new require('html-webpack-plugin')()","symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports.plugins.push(new HtmlWebpackPlugin())"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst path = require('path');\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      title: 'My App',\n      template: './src/template.html'\n    })\n  ]\n};","lang":"javascript","description":"Basic webpack config using HtmlWebpackPlugin with a custom template and output filename."},"warnings":[{"fix":"If using webpack 4, install html-webpack-plugin@4. For webpack 5, ensure webpack ^5.20.0.","message":"Version 5 requires webpack ^5.20.0. Using with webpack 4 requires version 4 of the plugin.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Set 'inject' to 'head' or 'body' explicitly, or use a custom template with manual injection.","message":"The plugin replaces the entire body content by default. To avoid removing existing content, use 'inject' option.","severity":"gotcha","affected_versions":"*"},{"fix":"Migrate to using 'htmlWebpackPluginAlterAssetTags' or other new hooks.","message":"The 'compilation' event hooks are deprecated in favor of the new hook system in webpack 5.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Be explicit with 'chunks' option to avoid unexpected bundles. Use 'excludeChunks' to exclude specific ones.","message":"If you use 'chunks' option, only those chunks are included. Omitting 'chunks' includes all chunks by default.","severity":"gotcha","affected_versions":"*"},{"fix":"Configure 'minify' option or set to false. Known issue: removing quotes or collapsing boolean attributes may break certain elements.","message":"Minification can corrupt HTML if not configured properly. Default minification uses html-minifier-terser.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure 'template' option points to an existing file. Use absolute path or relative to webpack context.","cause":"Template path is incorrect or file does not exist.","error":"Error: HtmlWebpackPlugin: could not load file: /path/to/template.html"},{"fix":"Run 'npm install --save-dev html-webpack-plugin' or 'yarn add --dev html-webpack-plugin'.","cause":"Package not installed or not in node_modules.","error":"Module not found: Error: Can't resolve 'html-webpack-plugin'"},{"fix":"Use default import: 'import HtmlWebpackPlugin from 'html-webpack-plugin'' or 'const HtmlWebpackPlugin = require('html-webpack-plugin')'.","cause":"Incorrect import: used named import instead of default.","error":"TypeError: HtmlWebpackPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}