{"id":15505826,"url":"https://github.com/colbyfayock/html-webpack-partials-plugin","last_synced_at":"2025-04-09T22:12:54.049Z","repository":{"id":32696269,"uuid":"139930911","full_name":"colbyfayock/html-webpack-partials-plugin","owner":"colbyfayock","description":"🛠 Easy HTML partials for Webpack without a custom index!","archived":false,"fork":false,"pushed_at":"2023-05-01T18:08:07.000Z","size":846,"stargazers_count":68,"open_issues_count":17,"forks_count":20,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T22:12:49.132Z","etag":null,"topics":["hacktoberfest","html-webpack-plugin","partials","webpack"],"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/colbyfayock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["colbyfayock"]}},"created_at":"2018-07-06T03:55:32.000Z","updated_at":"2025-01-05T00:20:18.000Z","dependencies_parsed_at":"2024-06-18T15:15:23.872Z","dependency_job_id":"87597c0a-3bd9-4f4a-a8b1-33b2cec8137a","html_url":"https://github.com/colbyfayock/html-webpack-partials-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbyfayock%2Fhtml-webpack-partials-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbyfayock%2Fhtml-webpack-partials-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbyfayock%2Fhtml-webpack-partials-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbyfayock%2Fhtml-webpack-partials-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colbyfayock","download_url":"https://codeload.github.com/colbyfayock/html-webpack-partials-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119293,"owners_count":21050755,"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":["hacktoberfest","html-webpack-plugin","partials","webpack"],"created_at":"2024-10-02T09:24:37.894Z","updated_at":"2025-04-09T22:12:54.019Z","avatar_url":"https://github.com/colbyfayock.png","language":"JavaScript","readme":"# Partials for HTML Webpack Plugin\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\n\n⚠️ **This project is no longer actively maintained**\n\nExtends [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) to add support for partials or templates.\n\n## Requirements\nRelies on `html-webpack-plugin` 4+ (currently at beta)\n\n## Installation\n```\nyarn add html-webpack-partials-plugin -D\n```\nor\n```\nnpm add html-webpack-partials-plugin --save-dev\n```\n\n## Usage\n\nRequire the plugin in your webpack config:\n```\nconst HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');\n```\n\nAdd the plugin to your webpack config as follows:\n```\nplugins: [\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackPartialsPlugin({\n    path: './path/to/partials/body.html'\n  })\n]\n```\n\nSet up your partial:\n```\n\u003cdiv\u003eHello World!\u003c/div\u003e\n```\n\n### Settings\n| Name      | Type     | Default | Description\n|:---------:|:--------:|:-------:|:----------|\n| path      | String   | none    | Partial location\n| inject    | Boolean  | true    | Conditionally inject your partial\n| location  | String   | \"body\"  | HTML tag name where the the partial gets added\n| priority  | String   | \"low\"   | \"high\", \"low\", \"replace\" - high/low determines if the partial gets added from the start of the location or end, while replace replaces the element completely.\n| template_filename | String/String[] | \"index.html\" | The filename of the HTML Webpack Plugin template that the partial should be attributed to. By default this is `index.html`, the HTML Webpack Plugin default output. Additionally, passing `*` will apply the partial to all templates in the compilation. This doesn't currently work in a regex format, thus something like `*.html` will NOT work and the only functionality `*` will provide is to match all templates. You can also pass an array of strings.\n| options   | Object   | {}      | Local variables/options to the given partial\n\nThe settings can either be passed in as a single object or an array of objects.\n\n## Examples\n\n### React App Root\n\nDon't bother creating a custom template just to add a [React](https://reactjs.org/) root element, simply add it as a partial!\n\n#### Set Up Your Config\nUsing an example of `webpack.config.js` with Babel installed:\n```\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackPartialsPlugin = require('../../');\n\nmodule.exports = {\n  entry: {\n    main: path.join(__dirname, './main.js')\n  },\n  output: {\n    path: path.join(__dirname, './dist'),\n    filename: '[name].js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: [\n              '@babel/preset-env',\n              '@babel/preset-react'\n            ]\n          }\n        }\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new HtmlWebpackPartialsPlugin({\n      path: path.join(__dirname, './partials/body.html')\n    })\n  ]\n};\n```\n\n#### Set Up your Partial\nAdd a mounting point for your application at `partials/body.html`:\n\n```\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n```\n\n#### Results\n💪Now your app has something to render to!\n```\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  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\" src=\"main.js\"\u003e\u003c/script\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n### Google Analytics \u0026 Google Optimize\n\nThe [recommended installation](https://support.google.com/optimize/answer/6262084?hl=en) of [Google Optimize](https://www.google.com/analytics/optimize/) alongside Google Analytics includes installing the snippet immediately after the `\u003cmeta charset` tag from the initial server-returned HTML. Loading this clientside using something like [React Helmet](https://github.com/nfl/react-helmet), unless using server side rendering, won't give us the benefits of giving an optimal loading experience when running A/B tests. To fix this, we can inject this snippet using a partial without having to create a custom HTML template file or trying to sloppily manage it in our app.\n\n#### Set Up Your Config\nUsing a basic example of `webpack.config.js`:\n```\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackPartialsPlugin = require('../../');\n\nmodule.exports = {\n  entry: {\n    main: path.join(__dirname, './main.js') // Not shown in thix example\n  },\n  output: {\n    path: path.join(__dirname, './dist'),\n    filename: '[name].js'\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new HtmlWebpackPartialsPlugin([\n      {\n        path: path.join(__dirname, './partials/analytics.html'),\n        priority: 'high',\n        location: 'head'\n      }\n    ])\n  ]\n};\n```\n#### Set Up your Partial\nUsing example code from the [installation guide](https://support.google.com/optimize/answer/6262084?hl=en), set up `partials/analytics.html`:\n\n```\n\u003c!-- Page-hiding snippet (recommended)  --\u003e\n\u003cstyle\u003e.async-hide { opacity: 0 !important} \u003c/style\u003e\n\u003cscript\u003e(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;\nh.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};\n(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;\n})(window,document.documentElement,'async-hide','dataLayer',4000,\n{'GTM-XXXXXX':true});\u003c/script\u003e\n\n\u003c!-- Modified Analytics tracking code with Optimize plugin --\u003e\n\u003cscript\u003e\n(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\nga('create', 'UA-XXXXXXXX-X', 'auto');\nga('require', 'GTM-XXXXXX');\nga('send', 'pageview');\n\u003c/script\u003e\n```\n\n#### Results\n🙆 now you're analytics code can be easily maintained and installed in the right spot!\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\u003c!-- Page-hiding snippet (recommended)  --\u003e\n\u003cstyle\u003e.async-hide { opacity: 0 !important} \u003c/style\u003e\n\u003cscript\u003e(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;\nh.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};\n(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;\n})(window,document.documentElement,'async-hide','dataLayer',4000,\n{'GTM-XXXXXX':true});\u003c/script\u003e\n\n\u003c!-- Modified Analytics tracking code with Optimize plugin --\u003e\n\u003cscript\u003e\n(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\nga('create', 'UA-XXXXXXXX-X', 'auto');\nga('require', 'GTM-XXXXXX');\nga('send', 'pageview');\n\u003c/script\u003e\n    \u003ctitle\u003eWebpack App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003cscript type=\"text/javascript\" src=\"main.js\"\u003e\u003c/script\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Other Examples\nSee a few other working examples here: https://html-webpack-partials-plugin.netlify.app/\n\nSee the source for the examples here: https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples\n\n## Notes\n\n### Determining Injection Point\nGiven the location and priority passed into the configuration, the plugin determines where to inject. The location is simply the name of the tag to use, where the priority is how high or how low in the tag we inject. For almost all situations, a high priority will inject immediately after the opening tag and low will inject immediately before the closing tag.\n\nThe one exception to this, if the passed in tagname is `head` with a `high` priority, the plugin will inject immediately after `\u003cmeta charset=\"utf-8\"\u003e`.\n\n### Order of Injection\nThe order is determined simply by the order in which the partial is included in the configuration.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://colbyfayock.com/newsletter\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1045274?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eColby Fayock\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=colbyfayock\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=colbyfayock\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://ssmith.dev\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6590114?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSteven Smith\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=ssmith353\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/avivshafir\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6135443?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAviv Shafir\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=avivshafir\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.jimdoyle.com.au\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1377237?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJim Doyle\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=superelement\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=superelement\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://septs.blog\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3842474?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSepts\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=septs\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://zjffun.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/25266120?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuFeng Zhang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=zjffun\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/vincenttaglia\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/15239196?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVictor Vincent Taglia\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=vincenttaglia\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=vincenttaglia\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/oh3vci\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20278777?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDae-ho Kim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/colbyfayock/html-webpack-partials-plugin/commits?author=oh3vci\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":["https://github.com/sponsors/colbyfayock"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbyfayock%2Fhtml-webpack-partials-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolbyfayock%2Fhtml-webpack-partials-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbyfayock%2Fhtml-webpack-partials-plugin/lists"}