{"id":13671328,"url":"https://github.com/SimenB/add-asset-html-webpack-plugin","last_synced_at":"2025-04-27T14:33:24.871Z","repository":{"id":4297559,"uuid":"52669492","full_name":"SimenB/add-asset-html-webpack-plugin","owner":"SimenB","description":"Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin","archived":false,"fork":false,"pushed_at":"2025-04-21T03:11:12.000Z","size":14992,"stargazers_count":336,"open_issues_count":24,"forks_count":41,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-21T04:33:41.598Z","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/SimenB.png","metadata":{"files":{"readme":"README.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,"zenodo":null}},"created_at":"2016-02-27T14:03:25.000Z","updated_at":"2025-04-21T03:11:16.000Z","dependencies_parsed_at":"2023-09-25T04:50:38.707Z","dependency_job_id":"30d14ba0-875a-4ee9-928a-d50f20e2d7a0","html_url":"https://github.com/SimenB/add-asset-html-webpack-plugin","commit_stats":{"total_commits":393,"total_committers":19,"mean_commits":20.68421052631579,"dds":0.549618320610687,"last_synced_commit":"41e0d87da9dfa25896afd05fd30051aed9274c19"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimenB%2Fadd-asset-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimenB%2Fadd-asset-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimenB%2Fadd-asset-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimenB%2Fadd-asset-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimenB","download_url":"https://codeload.github.com/SimenB/add-asset-html-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154466,"owners_count":21544506,"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:06.350Z","updated_at":"2025-04-27T14:33:20.111Z","avatar_url":"https://github.com/SimenB.png","language":"JavaScript","readme":"# add-asset-html-webpack-plugin\n\n\u003e Add a JavaScript or CSS asset to the HTML generated by `html-webpack-plugin`\n\n[![NPM Version][npm-image]][npm-url]\n[![CI Build Status][gh-actions-image]][gh-actions-url]\n[![Code Coverage branch][codecov-image]][codecov-url]\n\n## Installation\n\nInstall the plugin with `npm`:\n\n```sh\n$ npm i add-asset-html-webpack-plugin -D\n```\n\nNOTE: This plugin requires `html-webpack-plugin@^3`, `html-webpack-plugin@^4`,\nor `html-webpack-plugin@^5`.\n\n## Basic Usage\n\nThe plugin will add the given JS or CSS file to the files Webpack knows about,\nand put it into the list of assets `html-webpack-plugin` injects into the\ngenerated html. Add the plugin to your config, providing it a filepath:\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');\nconst webpackConfig = {\n  entry: 'index.js',\n  output: {\n    path: 'dist',\n    filename: 'index_bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') }),\n  ],\n};\n```\n\nThis will add a script tag to the HTML generated by `html-webpack-plugin`, and\nlook like:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eWebpack App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"index_bundle.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"some-file.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNOTE: You can also pass an array of assets to be added. Same API as mentioned\nbelow, just pass multiple objects as an array.\n\n```js\nnew AddAssetHtmlPlugin([\n  { filepath: require.resolve('./some-file') },\n  { filepath: require.resolve('./some-other-file') },\n  // Glob to match all of the dll file, make sure to use forward slashes on Windows\n  { glob: require.resolve('./**/*.dll.js') },\n]);\n```\n\n## Options\n\nOptions are passed to the plugin during instantiation.\n\n```js\nnew AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') });\n```\n\n#### `filepath`\n\nType: `string`, mandatory unless `glob` is defined\n\nThe absolute path of the file you want to add to the compilation, and resulting\nHTML file.\n\n#### `glob`\n\nType: `string`, mandatory unless `filepath` is defined\n\nA glob used to locate files to add to the compilation. See\n[`globby`'s docs](https://github.com/sindresorhus/globby) for how to use it.\n\n#### `files`\n\nType: `string|Array\u003cstring\u003e`, default `[]\n\nFiles that the assets will be added to.\n\nBy default the assets will be included in all files. If files are defined, the\nassets will only be included in specified file globs.\n\n#### `hash`\n\nType: `boolean`, default: `false`\n\nIf `true`, will append a unique hash of the file to the filename. This is useful\nfor cache busting.\n\n#### `includeRelatedFiles`\n\nType: `boolean`, default: `true`\n\nIf `true`, will add `filepath + '.*'` to the compilation as well. E.g\n`filepath.map` and `filepath.gz`.\n\n#### `outputPath`\n\nType: `string`\n\nIf set, will be used as the output directory of the file.\n\n#### `publicPath`\n\nType: `string`\n\nIf set, will be used as the public path of the script or link tag.\n\n#### `typeOfAsset`\n\nType: `string`, default: `js`\n\nCan be set to `css` to create a `link`-tag instead of a `script`-tag.\n\n#### `attributes`\n\nType: `object`, default: `{}`\n\nExtra attributes to be added to the generated tag. Useful to for instance add\n`nomodule` to a polyfill script. The `attributes` object uses the key as the\nname of the attribute, and the value as the value of it. If value is simply\n`true` no value will be added.\n\nAn example of this is included in the repository.\n\nCurrently only supports script tags.\n\n## Examples\n\nWhen adding assets, it's added to the start of the array, so when\n`html-webpack-plugin` injects the assets, it's before other assets. If you\ndepend on some order for the assets beyond that, and ordering the plugins\ndoesn't cut it, you'll have to create a custom template and add the tags\nyourself.\n\n### Add a DLL file from `webpack.DllPlugin`\n\nNote: Remember to build the DLL file in a separate build.\n\nSee [example](example/dll/) for an example of how to set it up. You can run it\nby cloning this repo, running `yarn` followed by `yarn run example`.\n\n#### Webpack config\n\n```js\nconst path = require('path');\nconst webpack = require('webpack');\nconst webpackConfig = {\n  entry: {\n    vendor: ['react', 'redux', 'react-router'],\n  },\n  devtool: '#source-map',\n  output: {\n    path: path.join(__dirname, 'build'),\n    filename: '[name].dll.js',\n    library: '[name]_[hash]',\n  },\n  plugins: [\n    new webpack.DllPlugin({\n      path: path.join(__dirname, 'build', '[name]-manifest.json'),\n      name: '[name]_[hash]',\n    }),\n  ],\n};\n```\n\nYour main build:\n\n```js\nconst path = require('path');\nconst webpack = require('webpack');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');\nconst webpackConfig = {\n  entry: 'index.js',\n  output: {\n    path: 'dist',\n    filename: 'index_bundle.js',\n  },\n  plugins: [\n    new webpack.DllReferencePlugin({\n      context: path.join(__dirname),\n      manifest: require('./build/vendor-manifest.json'),\n    }),\n    new HtmlWebpackPlugin(),\n    new AddAssetHtmlPlugin({\n      filepath: path.resolve(__dirname, './build/*.dll.js'),\n    }),\n  ],\n};\n```\n\n### Add a polyfill file you have locally\n\nSee [example](example/polyfill/) for an example of how to use it. You can run it\nby cloning this repo, running `yarn` followed by `yarn run example`.\n\n#### Webpack config\n\n```js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst AddAssetHtmlPlugin = require('../../');\n\nconst webpackConfig = {\n  entry: 'entry.js',\n  devtool: '#source-map',\n  mode: 'development',\n  output: {\n    path: 'dist',\n    filename: 'index_bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new AddAssetHtmlPlugin({\n      filepath: path.resolve(__dirname, './polyfill.js'),\n      attributes: {\n        nomodule: true,\n      },\n    }),\n  ],\n};\n```\n\n[npm-url]: https://npmjs.org/package/add-asset-html-webpack-plugin\n[npm-image]: https://img.shields.io/npm/v/add-asset-html-webpack-plugin.svg\n[gh-actions-url]:\n  https://github.com/SimenB/add-asset-html-webpack-plugin/actions/workflows/node.js.yml\n[gh-actions-image]:\n  https://github.com/SimenB/add-asset-html-webpack-plugin/actions/workflows/node.js.yml/badge.svg?branch=main\n[codecov-url]: https://codecov.io/gh/SimenB/add-asset-html-webpack-plugin\n[codecov-image]:\n  https://img.shields.io/codecov/c/github/SimenB/add-asset-html-webpack-plugin/main.svg\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimenB%2Fadd-asset-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimenB%2Fadd-asset-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimenB%2Fadd-asset-html-webpack-plugin/lists"}