{"id":20106,"library":"html-replace-webpack-plugin","title":"html-replace-webpack-plugin","description":"A Webpack plugin that replaces HTML content during build using string or regex patterns. Currently at version 2.6.0 with a low release cadence (last update in 2019). It works exclusively with html-webpack-plugin, processing the output of that plugin. Allows single or multiple replacement rules with string or function replacements. Lightweight alternative to heavier string replacement tasks in Webpack. Only tested with Webpack 4.x; no support for Webpack 5 or ESM.","status":"maintenance","version":"2.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/iminif/html-replace-webpack-plugin","tags":["javascript","html-replace-webpack-plugin","html","replace","webpack","plugin","iminif"],"install":[{"cmd":"npm install html-replace-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-replace-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-replace-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency; plugin operates on the output of html-webpack-plugin.","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"Package is CJS only; ESM import will fail. Use require() in Webpack config.","wrong":"import HtmlReplaceWebpackPlugin from 'html-replace-webpack-plugin'","symbol":"default","correct":"const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')"},{"note":"Plugin is exported as a single default function, not a named export. Named destructuring returns undefined.","wrong":"const { HtmlReplaceWebpackPlugin } = require('html-replace-webpack-plugin')","symbol":"HtmlReplaceWebpackPlugin","correct":"const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')"},{"note":"Passing a single object instead of an array works (accepts either), but passing multiple arguments as separate objects fails. Use array for multiple rules.","wrong":"new HtmlReplaceWebpackPlugin({ pattern: 'foo', replacement: 'bar' })","symbol":"Plugin usage","correct":"new HtmlReplaceWebpackPlugin([{ pattern: 'foo', replacement: 'bar' }])"}],"quickstart":{"code":"// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');\n\nconst resource = {\n  js: { bootstrap: '//cdn/bootstrap/bootstrap.min.js' },\n  css: { bootstrap: '//cdn/bootstrap/bootstrap.min.css' },\n  img: { 'the-girl': '//cdn/img/the-girl.jpg' }\n};\n\nconst tpl = {\n  img: '<img src=\"%s\">',\n  css: '<link rel=\"stylesheet\" type=\"text/css\" href=\"%s\">',\n  js: '<script type=\"text/javascript\" src=\"%s\"></script>'\n};\n\nmodule.exports = {\n  entry: './src/index.js',\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: 'My App',\n      template: './src/index.html'\n    }),\n    new HtmlReplaceWebpackPlugin([\n      { pattern: 'foo', replacement: 'bar' },\n      { pattern: '@@title', replacement: 'My App' },\n      {\n        pattern: /(<!--\\s*|@@)(css|js|img):([\\w-\\/]+)(\\s*-->)?/g,\n        replacement: function(match, $1, type, file, $4, index, input) {\n          var url = resource[type][file];\n          return $4 == undefined ? url : tpl[type].replace('%s', url);\n        }\n      }\n    ])\n  ]\n};","lang":"javascript","description":"Shows how to configure html-replace-webpack-plugin with html-webpack-plugin to replace HTML comments with CDN links for CSS/JS."},"warnings":[{"fix":"Ensure HtmlWebpackPlugin is instantiated before HtmlReplaceWebpackPlugin in the plugins array.","message":"html-webpack-plugin must be placed before html-replace-webpack-plugin in plugins array (Webpack 4).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use html-webpack-plugin and ensure it processes the target HTML files.","message":"Plugin only processes HTML generated by html-webpack-plugin; not standalone HTML files.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use default require: const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin').","message":"Named import or destructured require fails: const { HtmlReplaceWebpackPlugin } = require(...) => TypeError: HtmlReplaceWebpackPlugin is not a constructor.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like string-replace-loader or custom hooks for Webpack 5.","message":"Last release 2.6.0 (2019); no Webpack 5 support; may break with newer versions.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Wrap rules in an array: new Plugin([rule1, rule2]).","message":"Passing multiple rules as separate arguments (e.g., new Plugin(rule1, rule2)) fails; only first rule processed.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');","cause":"Correctly importing as default but often caused by spelling or named import.","error":"TypeError: HtmlReplaceWebpackPlugin is not a constructor"},{"fix":"Ensure each object has a 'pattern' and 'replacement' property.","cause":"Passing an empty object or missing pattern field.","error":"The 'pattern' property is required for each replacement object."},{"fix":"npm i -D html-webpack-plugin; then require it before use.","cause":"Missing installation or require of html-webpack-plugin.","error":"HtmlWebpackPlugin is not defined"},{"fix":"npm i -D html-replace-webpack-plugin","cause":"Plugin not installed or not in node_modules.","error":"Cannot find module 'html-replace-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}