{"id":20115,"library":"html-webpack-tags-plugin","title":"html-webpack-tags-plugin","description":"A webpack plugin that extends html-webpack-plugin to inject custom JS, CSS, or arbitrary tags (scripts, links, meta, etc.) into the generated HTML. Version 3.0.2 is the latest stable release, released on an irregular cadence. The plugin supports both appending and prepending assets, glob patterns for dynamic asset inclusion, and custom attributes on injected tags. It ships TypeScript types and requires webpack 5 and html-webpack-plugin 5 as peer dependencies. Key differentiator: unlike html-webpack-plugin's built-in asset injection, this plugin allows injecting files not tracked by webpack's compilation (e.g., copied via copy-webpack-plugin) and non-standard tags.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/jharris4/html-webpack-tags-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","html","tags","inject","include","assets","typescript"],"install":[{"cmd":"npm install html-webpack-tags-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-webpack-tags-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-webpack-tags-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; required to hook into HTML generation lifecycle","package":"html-webpack-plugin","optional":false},{"reason":"peer dependency; plugin runs in webpack compilation context","package":"webpack","optional":false}],"imports":[{"note":"Plugin has a default export. In CommonJS, use require('html-webpack-tags-plugin').default.","wrong":"const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin').default;","symbol":"HtmlWebpackTagsPlugin","correct":"import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';"},{"note":"The plugin is a default export, not a named export. Named import will be undefined.","wrong":"import { HtmlWebpackTagsPlugin } from 'html-webpack-tags-plugin';","symbol":"HtmlWebpackTagsPlugin","correct":"const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');"},{"note":"TypeScript users can import the options type for type-checking plugin configuration.","wrong":"","symbol":"PluginOptions","correct":"import type { PluginOptions } from 'html-webpack-tags-plugin';"}],"quickstart":{"code":"// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin').default;\n\nmodule.exports = {\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new HtmlWebpackTagsPlugin({\n      tags: [\n        { tagName: 'script', path: 'https://example.com/external.js', attributes: { async: true } },\n        { tagName: 'link', path: 'styles/custom.css', attributes: { rel: 'stylesheet' } },\n        { tagName: 'meta', attributes: { name: 'description', content: 'My app' } }\n      ],\n      append: true,\n      publicPath: true\n    })\n  ]\n};","lang":"javascript","description":"Shows how to configure HtmlWebpackTagsPlugin with external scripts, local CSS, and a meta tag, with append mode and public path enabled."},"warnings":[{"fix":"Use the new 'tags' array with objects containing 'tagName', 'path', 'attributes', etc. See migration guide.","message":"In v3, the options format changed significantly. The 'assets' array of version 2 is replaced by 'tags' objects with explicit 'tagName', 'path', and 'attributes'. Old 'assets' and 'append' options on the tags are no longer supported.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin').default;","message":"In v3, the default export changed. In CommonJS, you must use require('html-webpack-tags-plugin').default instead of require('html-webpack-tags-plugin').","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Set 'publicPath: true/false' in the plugin options object, or omit it per tag.","message":"The 'publicPath' option in tags is deprecated in v3. Instead, use 'publicPath' globally in the plugin options or set it per tag using 'attributes'.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Use 'append: true' to append after auto assets, or control order via multiple plugin instances.","message":"If you use 'append: false' globally, tags are prepended before html-webpack-plugin's auto-generated assets. This may cause ordering issues if you rely on a specific sequence.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set 'publicPath: true' in the plugin options to prepend the webpack publicPath to relative tag paths.","message":"The plugin does not handle webpack's publicPath automatically in all cases. If 'publicPath' option is not set, absolute paths may be missing the public path prefix.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin').default;","cause":"CommonJS require returns an object with 'default' property; using it directly as a constructor fails.","error":"TypeError: HtmlWebpackTagsPlugin is not a constructor"},{"fix":"Ensure each tag is an object with at least 'tagName' and optionally 'path' and 'attributes'. Example: { tagName: 'script', path: 'app.js' }","cause":"The 'tags' option was passed a string or invalid object (e.g., missing 'tagName').","error":"Error: options.tags must be an array of objects with tagName property"},{"fix":"Run 'npm install --save-dev html-webpack-tags-plugin' and ensure it is in the devDependencies.","cause":"The package is not installed or is in devDependencies but not installed when running webpack outside dev mode.","error":"Module not found: Error: Can't resolve 'html-webpack-tags-plugin'"},{"fix":"Use a static string or a variable that resolves to a known path. Avoid using expressions like `path: require('path').join(__dirname, 'file.js')` directly in the options object.","cause":"Using a dynamic path in the 'path' property of a tag without wrapping it in a string literal.","error":"Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}