{"id":13671281,"url":"https://github.com/jharris4/html-webpack-tags-plugin","last_synced_at":"2025-05-16T16:08:48.393Z","repository":{"id":16520300,"uuid":"79815946","full_name":"jharris4/html-webpack-tags-plugin","owner":"jharris4","description":"lets you define html tags to inject with html-webpack-plugin","archived":false,"fork":false,"pushed_at":"2023-08-04T16:31:53.000Z","size":904,"stargazers_count":257,"open_issues_count":15,"forks_count":31,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-16T16:08:08.840Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jharris4.png","metadata":{"files":{"readme":"README.V1.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-23T15:15:05.000Z","updated_at":"2025-05-13T11:17:02.000Z","dependencies_parsed_at":"2024-06-18T12:33:01.790Z","dependency_job_id":"69f90457-166a-4e70-99cb-64a360c6a699","html_url":"https://github.com/jharris4/html-webpack-tags-plugin","commit_stats":{"total_commits":276,"total_committers":15,"mean_commits":18.4,"dds":0.09782608695652173,"last_synced_commit":"bf5952c14430e998bc097e987a99f03a8eb36033"},"previous_names":["jharris4/html-webpack-include-assets-plugin"],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharris4%2Fhtml-webpack-tags-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharris4%2Fhtml-webpack-tags-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharris4%2Fhtml-webpack-tags-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharris4%2Fhtml-webpack-tags-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jharris4","download_url":"https://codeload.github.com/jharris4/html-webpack-tags-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254564127,"owners_count":22092122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:04.942Z","updated_at":"2025-05-16T16:08:48.374Z","avatar_url":"https://github.com/jharris4.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Include Assets extension for the HTML Webpack Plugin\n========================================\n[![npm version](https://badge.fury.io/js/html-webpack-include-assets-plugin.svg)](https://badge.fury.io/js/html-webpack-include-assets-plugin) [![Build Status](https://travis-ci.org/jharris4/html-webpack-include-assets-plugin.svg?branch=master)](https://travis-ci.org/jharris4/html-webpack-include-assets-plugin) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)\n\nThis is the `README.md` from **version 1.x** which provides support for ** Node \u003c 8.6 **.\n\nThis **version is deprecated** in favour of [https://github.com/jharris4/html-webpack-include-assets-plugin](html-webpack-include-assets-plugin version 2).\n\nEnhances [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)\nfunctionality by allowing you to specify js or css assets to be included.\n\nWhen using a plugin such as [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) you may have assets output to your build directory that are not detected/output by the html-webpack-plugin.\n\nThis plugin allows you to force some of these assets to be included in the output from html-webpack-plugin.\n\nInstallation\n------------\nYou must be running webpack on node 8.x or higher\n\nInstall the plugin with npm:\n```shell\n$ npm install --save-dev html-webpack-include-assets-plugin\n```\n\n\nBasic Usage\n-----------\nRequire the plugin in your webpack config:\n\n```javascript\nvar HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');\n```\n\nAdd the plugin to your webpack config:\n\n```javascript\noutput: {\n  publicPath: '/abc/'\n},\nplugins: [\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({ assets: ['a.js', 'b.css'], append: true })\n]\n```\n\nWhich will generate html like this:\n\n```html\n\u003chead\u003e\n  \u003c!-- other head content --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/abc/b.css\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- other body content --\u003e\n  \u003cscript type=\"text/javascript\" src=\"/abc/a.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n\nOptions\n-------\nThe available options are:\n\n- `jsExtensions`: `string` or `array`\n\n  Specifies the file extensions to use to determine if assets are script assets. Default is `['.js']`.\n\n- `cssExtensions`: `string` or `array`\n\n  Specifies the file extensions to use to determine if assets are style assets. Default is `['.css']`.\n\n- `assets`: `string` or `array` or `object`\n\n  Assets that will be output into your html-webpack-plugin template.\n\n  To specify just one asset, simply pass a string or object. To specify multiple, pass an array of strings or objects.\n\n  If the asset path is static and ends in one of the `jsExtensions` or `cssExtensions` values, simply use a string value.\n\n  If the asset is not static or does not have a valid extension, you can instead pass an object with properties `path` (required) and `type` or `glob` or `globPath` or `attributes` (optional). In this case `path` is the asset href/src, `type` is one of `js` or `css`, and `glob` is a wildcard to use to match all files in the path (uses the [glob](https://github.com/isaacs/node-glob) package). The `globPath` can be used to specify the directory from which the `glob` should search for filename matches (the default is to use `path` within webpack's output directory).\n\n  The `attributes` property may be used to add additional attributes to the link or script element that is injected. The keys of this object are attribute names and the values are the attribute values (string or boolean key values are allowed).\n\n  The `assetPath` property may be used to specify the full path to the included asset. This can be useful as it will trigger a recompilation after the assets have changed when using `webpack-dev-server` or `webpack-dev-middleware` in development mode.\n\n- `append`: `boolean`\n\n  Specifying whether the assets should be prepended (`false`) before any existing assets, or appended (`true`) after them.\n\n- `resolvePaths`: `boolean`\n\n  Specifying whether the asset paths should be resolved with `path.resolve` (i.e. made absolute).\n\n- `publicPath`: `boolean` or `string`\n\n  Specifying whether the assets should be prepended with webpack's public path or a custom publicPath (`string`).\n\n  A value of `false` may be used to disable prefixing with webpack's publicPath, or a value like `myPublicPath/` may be used to prefix all assets with the given string. Default is `true`.\n\n- `hash`: `boolean` or `function(assetName, hash)`\n\n  Specifying whether the assets should be appended with webpack's compilation hash. This is useful for cache busting. Default is `false`.\n\n- `files`: `string` or `array`\n\n  Files that the assets will be added to.\n\n  By default the assets will be included in all files. If files are defined, the assets will only be included in specified file globs (uses the [minimatch](https://github.com/isaacs/minimatch) package).\n\n  - `cssAssets`: `array`\n\n  Optional shortcut for adding css assets. An array of css asset objects.\n\n  See the cssAssets example below for the syntax of css asset object.\n\n\nExample\n-------\n\n_____\n\nUsing `HtmlWebpackIncludeAssetsPlugin` and `CopyWebpackPlugin` to include assets to `html-webpack-plugin` template :\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],\n    append: false\n  })\n]\n```\n\n_____\n\nAppending and prepending at the same time :\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],\n    append: false\n  }),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/custom.css'],\n    append: true\n  })\n]\n```\n\n_____\n\nUsing custom `jsExtensions` :\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['dist/output.js', 'lib/content.jsx'],\n    append: false,\n    jsExtensions: ['.js', '.jsx']\n  })\n]\n```\n\n_____\n\nUsing custom `publicPath` :\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],\n    append: false,\n    publicPath: 'myPublicPath/'\n  })\n]\n```\n\n_____\n\nOr to include assets without prepending the `publicPath`:\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/no-public-path.min.css', 'http://some.domain.com.js'],\n    append: false,\n    publicPath: false\n  })\n]\n```\n\n_____\n\nManually specifying asset types :\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [\n      '/css/bootstrap.min.css',\n      '/css/bootstrap-theme.min.css',\n      { path: 'https://fonts.googleapis.com/css?family=Material+Icons', type: 'css' }\n    ],\n    append: false,\n    publicPath: ''\n  })\n]\n```\n\n_____\n\nAdding custom attributes to asset tags :\n\nThe bootstrap-theme link tag will be given an id=\"bootstrapTheme\" attribute.\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [\n      '/css/bootstrap.min.css',\n      { path: '/css/bootstrap-theme.min.css', attributes: { id: 'bootstrapTheme' } }\n    ],\n    append: false,\n    publicPath: ''\n  })\n]\n```\n\n_____\n\nUsing `hash` option :\n\nWhen the hash option is set to `true`, asset paths will be appended with a hash query parameter (`?hash=\u003cthe_hash\u003e`)\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],\n    append: false,\n    hash: true\n  })\n]\n```\n\n_____\n\nWhen the hash option is set to a `function`, asset paths will be replaced with the result of executing that function\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'somepath/somejsfile.js', to: 'js/somejsfile.[hash].js' },\n    { from: 'somepath/somecssfile.css', to: 'css/somecssfile.[hash].css' }\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [{ path: 'js', glob: '*.js', globPath: 'somepath' }],\n    assets: [{ path: 'css', glob: '*.css', globPath: 'somepath' }],\n    append: false,\n    hash: function(assetName, hash) {\n      assetName = assetName.replace(/\\.js$/, '.' + hash + '.js');\n      assetName = assetName.replace(/\\.css$/, '.' + hash + '.css');\n      return assetName;\n    }\n  })\n]\n```\n\n_____\n\nSpecifying specific `files`\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin({\n    filename: 'a/index.html'\n  }),\n  new HtmlWebpackPlugin({\n    filename: 'b/index.html'\n  }),\n  new HtmlWebpackIncludeAssetsPlugin({\n    files: ['a/**/*.html'],\n    assets: ['css/a.css'],\n    append: true\n  }),\n  new HtmlWebpackIncludeAssetsPlugin({\n    files: ['b/**/*.html'],\n    assets: ['css/b.css'],\n    append: true\n  })\n]\n```\n\n_____\n\nSpecifying assets usings a `glob`\n\nNote that since `copy-webpack-plugin` does not actually copy the files to webpack's output directory until *after* `html-webpack-plugin` has completed, it is necessary to use the `globPath` to retrieve filename matches relative to the original location of any such files.\n\n```javascript\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [{ path: 'css', glob: '*.css', globPath: 'node_modules/bootstrap/dist/css/' }],\n    append: true\n  })\n]\n```\n\n_____\n\nSpecifying `cssAssets` (a shortcut for specifying assets of type css)\n\n```javascript\noutput: {\n  publicPath: '/my-public-path/'\n},\nplugins: [\n  new CopyWebpackPlugin([\n    { from: 'node_modules/bootstrap/dist/css', to: 'css/'},\n    { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}\n  ]),\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [],\n    append: true,\n    cssAssets: [\n      {\n        href: 'asset/path',\n        attributes: {\n          rel: 'icon'\n        }\n      },\n      {\n        href: '/absolute/asset/path',\n        asset: false,\n        attributes: {\n          rel: 'manifest'\n        }\n      }\n    ]\n  })\n]\n```\n\nWill append the following link elements into the index template html\n\n```html\n\u003chead\u003e\n  \u003c!-- previous header content --\u003e\n  \u003clink rel=\"icon\" href=\"/my-public-path/asset/path\"/\u003e\n  \u003clink rel=\"manifest\" href=\"/absolute/asset/path\"/\u003e\n\u003c/head\u003e\n```\n\nNote that the second cssAsset's href was not prefixed with the webpack `publicPath` because `csAsset.asset` was set to `false`.\n\n_____\n\n\nCaveats\n-------\n\nSome users have encountered issues with plugin ordering.\n\n- It is advisable to always place any `HtmlWebpackPlugin` plugins **before** any `HtmlWebpackIncludeAssetsPlugin` plugins in your webpack config.\n\nThis plugin has only been tested with **two instances** in one webpack config, where one had `option.append: false` and the other had `option.append: true`.\n\n- It is **not recommended to use more than one instance of this plugin** in one webpack config unless using the above configuration.\n\nChanging `HtmlWebpackPlugin.options.inject` from its **default value** may cause **issues**.\n\n- This plugin **requires** `HtmlWebpackPlugin.options.inject` to be `true` (it defaults to true if undefined) for attribute injection to work.\n\n\nIf you setup your webpack config to have `HtmlWebpackPlugin.options.inject: false` like this:\n\n```javascript\noutput: {\n  publicPath: '/the-public-path/'\n},\nplugins: [\n  new HtmlWebpackPlugin({ inject: false }),\n  new HtmlWebpackIncludeAssetsPlugin({\n    assets: [{ path: 'css/bootstrap-theme.min.css', attributes: { id: 'bootstrapTheme' } }],\n    links: [{ href: 'the-ref', attributes: { rel: 'icon' } }],\n    append: true\n  })\n]\n```\n\nYou will need to add the following to your *template* `index.html` to get assets to be **generated**:\n\n```html\n\u003chead\u003e\n  \u003c!-- other head content --\u003e\n  \u003c% for (var cssIndex = 0; cssIndex \u003c htmlWebpackPlugin.files.css.length; cssIndex++) { %\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003c%= htmlWebpackPlugin.files.css[cssIndex] %\u003e\"\u003e\n  \u003c% } %\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- other body content --\u003e\n  \u003c% for (var jsIndex = 0; jsIndex \u003c htmlWebpackPlugin.files.js.length; jsIndex++) { %\u003e\n    \u003cscript src=\"\u003c%= htmlWebpackPlugin.files.js[jsIndex] %\u003e\"\u003e\u003c/script\u003e\n  \u003c% } %\u003e\n\u003c/body\u003e\n```\n\nUsing the (lodash) `template syntax` like this for css and js files is necessary when you turn injection off.\n\nBut, the `template syntax` does not allow injection of more than `one attribute value`.\n\nThis means it will **generate** an `index.html` that looks like this:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"/the-public-path/css/bootstrap-theme.min.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"/the-public-path/the-ref\"\u003e\n\u003c/head\u003e\n```\n\nNone of the `link` elements have any of the `attributes` we specified for the `assets` or `links`.\n\nThis is because `HtmlWebpackPlugin.options.inject` needs to be set to `true` for `attributes` injection to work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjharris4%2Fhtml-webpack-tags-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjharris4%2Fhtml-webpack-tags-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjharris4%2Fhtml-webpack-tags-plugin/lists"}