Registry /
devops / html-replace-webpack-plugin
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default
✓ const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
✗ import HtmlReplaceWebpackPlugin from 'html-replace-webpack-plugin'
Package is CJS only; ESM import will fail. Use require() in Webpack config.
HtmlReplaceWebpackPlugin
✓ const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
✗ const { HtmlReplaceWebpackPlugin } = require('html-replace-webpack-plugin')
Plugin is exported as a single default function, not a named export. Named destructuring returns undefined.
Plugin usage
✓ new HtmlReplaceWebpackPlugin([{ pattern: 'foo', replacement: 'bar' }])
✗ new HtmlReplaceWebpackPlugin({ pattern: 'foo', replacement: 'bar' })
Passing a single object instead of an array works (accepts either), but passing multiple arguments as separate objects fails. Use array for multiple rules.
Shows how to configure html-replace-webpack-plugin with html-webpack-plugin to replace HTML comments with CDN links for CSS/JS.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
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 = {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: './src/index.html'
}),
new HtmlReplaceWebpackPlugin([
{ pattern: 'foo', replacement: 'bar' },
{ pattern: '@@title', replacement: 'My App' },
{
pattern: /(<!--\s*|@@)(css|js|img):([\w-\/]+)(\s*-->)?/g,
replacement: function(match, $1, type, file, $4, index, input) {
var url = resource[type][file];
return $4 == undefined ? url : tpl[type].replace('%s', url);
}
}
])
]
};
Errors
Common errors & fixes
TypeError: HtmlReplaceWebpackPlugin is not a constructor
Correctly importing as default but often caused by spelling or named import.
fixconst HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin'); The 'pattern' property is required for each replacement object.
Passing an empty object or missing pattern field.
fixEnsure each object has a 'pattern' and 'replacement' property.
HtmlWebpackPlugin is not defined
Missing installation or require of html-webpack-plugin.
fixnpm i -D html-webpack-plugin; then require it before use.
Cannot find module 'html-replace-webpack-plugin'
Plugin not installed or not in node_modules.
fixnpm i -D html-replace-webpack-plugin
Audit
Dependencies
html-webpack-pluginrequiredRequired peer dependency; plugin operates on the output of html-webpack-plugin.