Skip to content
A Webpack plugin for replace HTML contents with custom pattern string or regex.
JavaScript
Branch: master
Clone or download
Latest commit 65afdbf Sep 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE release Sep 27, 2016
README.md Readme with RegEx example Aug 19, 2019
index.js Merge pull request #17 from SCullman/patch-1 Sep 21, 2019
package.json adjust hook to run before minimizign Apr 16, 2019

README.md

html-replace-webpack-plugin

A Webpack plugin for replace HTML contents with custom pattern string or regex.

Examples

https://github.com/iminif/html-replace-webpack-plugin-howto

💚 Special Note! 👀

This plugin works together with html-webpack-plugin!

Usage

First of all, you need both html-webpack-plugin and html-replace-webpack-plugin.

npm i -D html-webpack-plugin html-replace-webpack-plugin

Then, add it to your webpack.config.js file:

In your webpack.config.js file:

💚 Please ensure that html-webpack-plugin was placed before html-replace-webpack-plugin in your Webpack config if you were working with Webpack 4.x!

var webpack = require('webpack')
var HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')

// file types & file links
const resource = {
  js: { bootstrap: '//cdn/bootstrap/bootstrap.min.js' },
  css: { bootstrap: '//cdn/bootstrap/bootstrap.min.css' },
  img: { 'the-girl': '//cdn/img/the-girl.jpg' }
}

const tpl = {
  img: '<img src="%s">',
  css: '<link rel="stylesheet" type="text/css" href="%s">',
  js: '<script type="text/javascript" src="%s"></script>'
}

module.exports = {
  // Definition for Webpack plugins
  plugin: [
    new HtmlWebpackPlugin({
      /* configs */
    }),
    // Replace html contents with string or regex patterns
    new HtmlReplaceWebpackPlugin([
      {
        pattern: 'foo',
        replacement: '`foo` has been replaced with `bar`'
      },
      {
        pattern: '@@title',
        replacement: 'html replace webpack plugin'
      },
            {
        pattern: /<p>(.+?)<\/p>/g, // /g => replace all
        replacement: '<div>$1</div>'
      },
      {
        pattern: /(<!--\s*|@@)(css|js|img):([\w-\/]+)(\s*-->)?/g,
        replacement: function(match, $1, type, file, $4, index, input) {
          // those formal parameters could be:
          // match: <-- css:bootstrap-->
          // type: css
          // file: bootstrap
          // Then fetch css link from some resource object
          // var url = resources['css']['bootstrap']

          var url = resource[type][file]

          // $1==='@@' <--EQ--> $4===undefined
          return $4 == undefined ? url : tpl[type].replace('%s', url)
        }
      }
    ])
  ]
}

In your src/index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>@@title</title>
      <!-- css:bootstrap -->
    </head>
    <body>
      <div>foo</div>
      <p>I wanna be in a div</p>
      <!-- js:bootstrap -->
    </body>
</html>

After replacing, in the dist/index.html file:

<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>html replace webpack plugin</title>
      <link rel="stylesheet" type="text/css" href="//cdn/bootstrap/bootstrap.min.css">
    </head>
    <body>
      <div>`foo` has been replaced with `bar`</div>
      <div>I wanna be in a div</div>
      <script type="text/javascript" src="//cdn/bootstrap/bootstrap.min.js"></script>
    </body>
</html>

API

html-replace-webpack-plugin can be called with an objects array or an object.

Options for html-replace-webpack-plugin

new HtmlReplaceWebpackPlugin([obj1[, obj2[, obj3[, ...[, objN]]]]] | obj)

[obj1[, obj2[, obj3[, ...[, objN]]]]] | obj

Type: Objects Array | Object

obj1, obj2, obj3, ..., objN | obj

Type: Object

obj.pattern

Type: String | RegExp

string or regex pattern for matching HTML content. See the MDN documentation for RegExp for details.

obj.replacement

Type: String | Function

string with which the matching string be replaced, or function which returns a string for replacing. See the MDN documentation for String.replace for details.

You can’t perform that action at this time.