{"id":13672919,"url":"https://github.com/BTOdell/replace-url-html-webpack-plugin","last_synced_at":"2025-04-28T04:30:33.012Z","repository":{"id":31455260,"uuid":"127947232","full_name":"BTOdell/replace-url-html-webpack-plugin","owner":"BTOdell","description":"Updates the URLs for existing script (JS) and link (CSS) elements in an HTML template with URLs generated by Webpack","archived":false,"fork":false,"pushed_at":"2023-01-07T02:20:11.000Z","size":1247,"stargazers_count":5,"open_issues_count":16,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T16:18:37.384Z","etag":null,"topics":["asset","css","html-webpack-plugin","inject","js","link","plugin","replace","script","transform","update","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BTOdell.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}},"created_at":"2018-04-03T17:54:07.000Z","updated_at":"2022-07-17T19:42:50.000Z","dependencies_parsed_at":"2023-01-14T19:04:36.456Z","dependency_job_id":null,"html_url":"https://github.com/BTOdell/replace-url-html-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTOdell%2Freplace-url-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTOdell%2Freplace-url-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTOdell%2Freplace-url-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTOdell%2Freplace-url-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BTOdell","download_url":"https://codeload.github.com/BTOdell/replace-url-html-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251251787,"owners_count":21559661,"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":["asset","css","html-webpack-plugin","inject","js","link","plugin","replace","script","transform","update","webpack"],"created_at":"2024-08-02T09:01:57.282Z","updated_at":"2025-04-28T04:30:32.662Z","avatar_url":"https://github.com/BTOdell.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"URL replacement for HTML Webpack Plugin\n=======================================\n\n[![Build Status](https://travis-ci.com/BTOdell/replace-url-html-webpack-plugin.svg?branch=master)](https://travis-ci.com/BTOdell/replace-url-html-webpack-plugin)\n![npm](https://img.shields.io/npm/v/replace-url-html-webpack-plugin.svg)\n![npm dependencies](https://david-dm.org/btodell/replace-url-html-webpack-plugin.svg)\n![node](https://img.shields.io/node/v/replace-url-html-webpack-plugin.svg)\n![npm type definitions](https://img.shields.io/npm/types/replace-url-html-webpack-plugin.svg)\n![npm license](https://img.shields.io/npm/l/replace-url-html-webpack-plugin.svg)\n\n[![NPM](https://nodei.co/npm/replace-url-html-webpack-plugin.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/replace-url-html-webpack-plugin/)\n\nThis is an extension plugin for the [webpack](https://www.npmjs.com/package/webpack) plugin [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) - a plugin that simplifies the creation of HTML files to serve your webpack bundles.\n\nTypically, [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) injects `\u003cscript\u003e` and `\u003clink\u003e` elements into generated HTML.\nWhen used with a template, [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) will still inject new elements regardless of whether or not elements already exist for the assets.\n\nThis plugin will automatically update the URLs for existing `\u003cscript\u003e` and `\u003clink\u003e` elements in an HTML template with URLs generated by Webpack.\nIt identifies existing elements by comparing their URLs with the generated output file name from Webpack. See Example section.\n\nWebpack doesn't handle CSS resources natively.\nHowever, by using some of the following plugin combinations you can make them accessible to [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin):\n* copy-webpack-plugin ([npm](https://www.npmjs.com/package/copy-webpack-plugin)) ([github](https://github.com/webpack-contrib/copy-webpack-plugin)),\u003cbr\u003e\nhtml-webpack-include-assets-plugin ([npm](https://www.npmjs.com/package/html-webpack-include-assets-plugin)) ([github](https://github.com/jharris4/html-webpack-include-assets-plugin))\n* extract-text-webpack-plugin ([npm](https://www.npmjs.com/package/extract-text-webpack-plugin)) ([github](https://github.com/webpack-contrib/extract-text-webpack-plugin)) (warning: untested)\n\nEnvironment\n-----------\n* [node](https://nodejs.org/) \u003e= 6.11.5\n\nPeer Dependencies\n------------\n* webpack ([npm](https://www.npmjs.com/package/webpack)) ([github](https://github.com/webpack/webpack)) \u003e= 4.0.0\n* html-webpack-plugin ([npm](https://www.npmjs.com/package/html-webpack-plugin)) ([github](https://github.com/jantimon/html-webpack-plugin)) \u003e= 4.0.0\n\nInstallation\n------------\nInstall the plugin as a development dependency using npm:\n```shell\n$ npm install replace-url-html-webpack-plugin --save-dev\n```\n\nBasic Usage\n-----------\n\nThe plugin has no configuration. Simply, add the plugin to your webpack config as follows:\n\n```javascript\n{\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new ReplaceUrlHtmlWebpackPlugin()\n  ]\n}\n```\n\nThe order is important - the plugin must come **after** HtmlWebpackPlugin.\n\nExample\n-------\n\nConsider the following HTML template:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eExample\u003c/title\u003e\n        \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"css/index.css\" /\u003e\n        \u003cscript async=\"async\" src=\"js/bundle.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf webpack is configured to generate the bundle with a hash included, then the URLs for both `\u003cscript\u003e` and `\u003clink\u003e` will be replaced:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eExample\u003c/title\u003e\n        \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"css/index.abcdef0123456789.css\" /\u003e\n        \u003cscript async=\"async\" src=\"js/bundle.abcdef0123456789.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBTOdell%2Freplace-url-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBTOdell%2Freplace-url-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBTOdell%2Freplace-url-html-webpack-plugin/lists"}