{"id":18890675,"url":"https://github.com/devwurm/html-includer-webpack-plugin","last_synced_at":"2026-02-25T17:30:16.664Z","repository":{"id":57267412,"uuid":"65335293","full_name":"DevWurm/html-includer-webpack-plugin","owner":"DevWurm","description":"Webpack plugin to include snippets of html into an HTML output via html-webpack-plugin","archived":false,"fork":false,"pushed_at":"2016-09-06T13:49:52.000Z","size":22,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T03:37:28.918Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevWurm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-09T23:35:58.000Z","updated_at":"2016-12-30T22:29:00.000Z","dependencies_parsed_at":"2022-08-29T04:42:14.905Z","dependency_job_id":null,"html_url":"https://github.com/DevWurm/html-includer-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevWurm%2Fhtml-includer-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevWurm%2Fhtml-includer-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevWurm%2Fhtml-includer-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevWurm%2Fhtml-includer-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevWurm","download_url":"https://codeload.github.com/DevWurm/html-includer-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239861866,"owners_count":19709309,"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-11-08T07:56:57.543Z","updated_at":"2026-02-25T17:30:16.519Z","avatar_url":"https://github.com/DevWurm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-includer-webpack-plugin and include-loader\nWhen using Webpack for Web project bundling, dependency declaration and resolving works like a charm, until you need dependencies, which are not provided via the common module systems or which need to include static pieces of Html into the global scope (like the [webcomponentsjs polyfill](http://webcomponents.org/polyfills/) or [Polymer Components](https://elements.polymer-project.org/guides/using-elements#using-elements) like [Vaadin Elements](https://vaadin.com/docs/-/part/elements/elements-getting-started.html#create-a-html-file)). In these cases you have to touch your Html files manually to include your dependencies like this:\n```html\n\u003cscript src=\"bower_components/webcomponentsjs/webcomponents-lite.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"import\" href=\"bower_components/polymer/polymer.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/paper-styles/color.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/paper-styles/typography.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/vaadin-combo-box/vaadin-combo-box.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/paper-input/paper-input.html\"\u003e\n```\nJust to be able to use these dependencies somewhere completely different in you application:\n```javascript\nimport { PolymerElement } from '@vaadin/angular2-polymer';\n\nPolymerElement('vaadin-combo-box'),\nPolymerElement('paper-input')\n```\nIn addition to that you have to deal with putting the dependencies into your servers webroot yourself and can't use Webpack therefor.\n\nThis leads to some problems:\n* **Inconvenience:** You are forced to touch another file somewhere else in you application to include your dependencies and you have to put some files somewhere into your builds by hand (or by script) (sounds ugly, doesn't it?)\n* **Inferior maintainability:** Because the declaration of your dependencies and their usage is spread throughout your whole project, you have to keep track of which dependencies are still needed and which can be removed manually (which could lead to wrongly removed elements or unused stuff in your application)\n* **Worse Readablity:** Because the dependencies are used without without declaring them in the same place, some identifiers won't make a lot of sense and the list of dependency declarations may not be very clear without their usage, too\n* **Webpack is bypassed:** By importing some files from your webroot silently, you cheat Webpacks dependency graph, so your build with webpack is not standalone (because the extra files are still needed) and features like the watch mode may not work\n\nThis tool tries to attack these problems by providing a familiarly usable loader-plugin combination to import static (Html) files and include them into your entry point html file (i.e. `index.html`). Therewith static dependencies can be declared in the module where they are needed with a simple require statement and the loader and the plugin take care of all the other stuff like\n* embedding the content of your dependency into your projects global scope\n* deduplication of multiply included content\n* resolution of sub-dependencies from your module paths and relative files\n* activation of file watching for your dependencies and sub-dependencies\n\n## Dependencies\nThe *html-includer-webpack-plugin* hooks into the commonly used [*html-webpack-plugin*](https://github.com/ampedandwired/html-webpack-plugin) to add your dependencies into your entry point html. So if this plugin isn't used to generate your `index.html` file (and consequentially Webpack may not be involved into your Html generation at all?) the *html-includer-webpack-plugin* probably won't do anything. Furthermore the *html-includer-webpack-plugin* and the *include-loader* are supposed to be used in combination. Technically it's possible to \"use\" all these components individually but in this case they won't do anything but sitting around and snacking your system resources.\n\nSo to have a working setup for embedding static resources into your project you have to install and configure the *html-includer-webpack-plugin* as well as the *html-webpack-plugin* and use the *include-loader* to require your resources.\n\n... Oh, and maybe you should use Webpack to build your project.\n\n## Installation\nYou can install the plugin and the loader via [npm](https://www.npmjs.com/):\n```sh\nnpm install --save-dev html-includer-webpack-plugin include-loader\n```\nAnd if you haven't installed the *html-webpack-plugin* already:\n```sh\nnpm install --save-dev html-webpack-plugin\n```\n\n## Setup\nTo use the plugin just hook it into the `plugins` section of your `webpack.config.js` (or another file you use for configuring Webpack):\n```js\n// webpack.config.js\nimport * as HtmlWebpackPlugin from 'html-webpack-plugin';\nimport HtmlIncluderWebpackPlugin from 'html-includer-webpack-plugin';\n/* ... */\n\nmodule.exports = {\n    entry: \"./entry.js\",\n    output: {\n        path: __dirname,\n        filename: \"bundle.js\"\n    },\n    /* ... */\n    plugins: [\n     /* ... */\n      new HtmlWebpackPlugin(),\n      new HtmlIncluderWebpackPlugin(),\n\n    ],\n    /* ... */\n};\n```\nYou may want to have a look on how to [configure the *html-webpack-plugin*](https://github.com/ampedandwired/html-webpack-plugin#configuration)\n\n## Usage\nTo include a file just load it in your depending source file via the *include-loader*:\n```javascript\n// my-depending-source.js\nrequire('!include-loader!./path/to/my/dependency.html');\n```\nThis will inline the content of `dependency.html` into your entry point html (`index.html`).\n\nThe leading `!` suppresses all other defined loaders for your dependencies filetype. Because the *include-loader* doesn't behave like a real loader and more like a hook this is the way you mostly want to use it. Omitting the `!` will lead to a broken result in the most cases, so only use the configured loaders when you really know what you do (You may consult the [details section](#details))!\n\nThe `require` line will be substituted by an empty line in the build result.\n\n### Surround your file content by specified tag\nThe *include-loader* provides you the possibility of surrounding the content of your source file by a html tag specified in the query of your loader invocation.\n\nExample: the `require` statement `require('!include-loader?script!./path/to/my/dependency.js');` would result in the following inline snippet in your `index.html`:\n```html\n\u003cscript\u003e// content of dependency.js\u003c/script\u003e\n```\nWith this technique you can include static JavaScript bundles developed for the browser (like polyfills) or stylesheets.\n\n\u003c!-- TODO: dependency resolution, deduplication --\u003e\n\n## Details\n\u003c!-- TODO: return value, communication, ... --\u003e\n\n\u003c!-- TODO: License, Contributing, Author, ... --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevwurm%2Fhtml-includer-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevwurm%2Fhtml-includer-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevwurm%2Fhtml-includer-webpack-plugin/lists"}