replace-url-html-webpack-plugin
Advanced tools
Updates the URLs for existing script (JS) and link (CSS) elements in an HTML template with URLs generated by Webpack
This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
Typically, html-webpack-plugin injects <script> and <link> elements into generated HTML.
When used with a template, html-webpack-plugin will still inject new elements regardless of whether or not elements already exist for the assets.
This plugin will automatically update the URLs for existing <script> and <link> elements in an HTML template with URLs generated by Webpack.
It identifies existing elements by comparing their URLs with the generated output file name from Webpack. See Example section.
Webpack doesn't handle CSS resources natively. However, by using some of the following plugin combinations you can make them accessible to html-webpack-plugin:
Install the plugin as a development dependency using npm:
$ npm install replace-url-html-webpack-plugin --save-dev
The plugin has no configuration. Simply, add the plugin to your webpack config as follows:
{
plugins: [
new HtmlWebpackPlugin(),
new ReplaceUrlHtmlWebpackPlugin()
]
}
The order is important - the plugin must come after HtmlWebpackPlugin.
Consider the following HTML template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script async="async" src="js/bundle.js"></script>
</head>
<body>
...
</body>
</html>
If webpack is configured to generate the bundle with a hash included, then the URLs for both <script> and <link> will be replaced:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/index.abcdef0123456789.css" />
<script async="async" src="js/bundle.abcdef0123456789.js"></script>
</head>
<body>
...
</body>
</html>
FAQs
Updates the URLs for existing script (JS) and link (CSS) elements in an HTML template with URLs generated by Webpack
The npm package replace-url-html-webpack-plugin receives a total of 55 weekly downloads. As such, replace-url-html-webpack-plugin popularity was classified as not popular.
We found that replace-url-html-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.