{"id":20137,"library":"inject-html-webpack-plugin","title":"inject-html-webpack-plugin","description":"A webpack plugin that injects script tags and CSS links into HTML files using placeholder comments. Version 1.0.1 is the latest stable release. It provides an alternative to html-webpack-plugin with customizable injection markers, support for chunk-based asset injection, custom content injection, and transducer functions for CDN URL rewriting. Notable differentiators include simpler configuration via HTML comments and lower overhead.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/ali322/inject-html-webpack-plugin","tags":["javascript","webpack","html"],"install":[{"cmd":"npm install inject-html-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add inject-html-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add inject-html-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CJS only; ESM imports may fail due to lack of default export.","wrong":"import InjectHtmlPlugin from 'inject-html-webpack-plugin';","symbol":"InjectHtmlPlugin","correct":"const InjectHtmlPlugin = require('inject-html-webpack-plugin');"},{"note":"Use CJS require or import with esModuleInterop for TypeScript.","wrong":"import * as InjectHtmlPlugin from 'inject-html-webpack-plugin';","symbol":"InjectHtmlPlugin","correct":"import InjectHtmlPlugin = require('inject-html-webpack-plugin'); (in TypeScript with esModuleInterop)"},{"note":"filename is relative to webpack context, default './index.html' works if file exists.","wrong":"new InjectHtmlPlugin({ filename: 'index.html' }) with no './' (relative path issue)","symbol":"new InjectHtmlPlugin(options)","correct":"new InjectHtmlPlugin({ filename: './index.html' })"}],"quickstart":{"code":"// webpack.config.js\nconst InjectHtmlPlugin = require('inject-html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: './dist',\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new InjectHtmlPlugin({\n      filename: './src/index.html',\n      chunks: ['main'],\n      transducer: 'https://cdn.example.com/',\n      custom: [{\n        start: '<!-- start:time -->',\n        end: '<!-- end:time -->',\n        content: Date.now()\n      }]\n    })\n  ]\n};","lang":"javascript","description":"Configures InjectHtmlPlugin to inject script and CSS links into an HTML file with CDN transducer and custom timestamp injection."},"warnings":[{"fix":"Ensure the HTML file specified by 'filename' exists in the output path before running webpack.","message":"Plugin does not generate HTML file; it only injects into existing files.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use same string as in entry configuration, e.g., entry: { index: './src/index.js' } → chunks: ['index'].","message":"Chunk names in 'chunks' array must match entry keys exactly; case-sensitive.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure transducer string ends with '/' if used as URL base, or provide a function that handles path concatenation.","message":"Transducer can be a string prepended to asset paths or a function; using a string without trailing slash may break paths.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Manually escape HTML special characters if needed.","message":"Custom injection content is inserted as-is; no escaping or template processing.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider migrating to html-webpack-plugin for better support and features.","message":"Plugin may be deprecaed in favor of html-webpack-plugin which is more actively maintained.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install inject-html-webpack-plugin --save-dev","cause":"Package not installed or missing from node_modules.","error":"Module not found: Error: Can't resolve 'inject-html-webpack-plugin'"},{"fix":"Use require() instead: const InjectHtmlPlugin = require('inject-html-webpack-plugin');","cause":"Using ES module import without default export adaption.","error":"TypeError: InjectHtmlPlugin is not a constructor"},{"fix":"Ensure the HTML file exists at the specified path, or update 'filename' accordingly.","cause":"The 'filename' option points to a non-existent file relative to webpack context.","error":"Error: Could not find file: ./index.html for injection"},{"fix":"Check options object for misspellings (e.g., 'filname' instead of 'filename') and ensure only valid keys: filename, chunks, transducer, etc.","cause":"Options passed to constructor have typos or invalid keys.","error":"ValidationError: Invalid options object. InjectHtmlPlugin has been initialized using an options object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}