New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

replace-url-html-webpack-plugin

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

replace-url-html-webpack-plugin

Updates the URLs for existing script (JS) and link (CSS) elements in an HTML template with URLs generated by Webpack

latest
Source
npmnpm
Version
2.0.1
Version published
Maintainers
1
Created
Source

URL replacement for HTML Webpack Plugin

Build Status npm npm dependencies node npm type definitions npm license

NPM

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:

  • copy-webpack-plugin (npm) (github),
    html-webpack-include-assets-plugin (npm) (github)
  • extract-text-webpack-plugin (npm) (github) (warning: untested)

Environment

Peer Dependencies

Installation

Install the plugin as a development dependency using npm:

$ npm install replace-url-html-webpack-plugin --save-dev

Basic Usage

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.

Example

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>

Keywords

webpack
html-webpack-plugin
plugin
replace
update
transform

FAQs

Package last updated on 21 May 2020

Did you know?

Socket

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.

Install

Related posts

Feross on TBPN: How North Korea Hijacked Axios

Security News

Feross on TBPN: How North Korea Hijacked Axios

Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.

By Sarah Gooding  -  Apr 08, 2026