Replacer Contenthash Webpack Plugin

1.0.17 verified Sat Apr 25 auth: no javascript deprecated

A webpack plugin that replaces references to static files (CSS, JS, images, SVG sprites) in HTML templates and source files with their contenthash-based filenames. Current stable version is 1.0.17 (last updated August 2017). It requires the loader-utils package and works with webpack 3.x and older. Unlike webpack's built-in [contenthash] support, this plugin directly modifies text files (not just output filenames) and is useful for projects that need to update hardcoded paths in templates or source code. It is considered legacy; modern webpack versions (4+) have native similar functionality.

Common errors

error Module not found: Can't resolve 'loader-utils' ↓

cause Missing required peer dependency loader-utils.

fix

npm install loader-utils --save-dev

error TypeError: ReplacerContenthashWebpackPlugin is not a constructor ↓

cause Using ESM import or destructured require; package is CommonJS default export.

fix

Use: const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');

error Error: Cannot read property 'replace' of undefined ↓

cause Options filesDir or templatesFolder not set or empty array.

fix

Ensure at least one of filesDir or files is provided, and one of templatesFolder or templates.

error Error: Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Plugin is not compatible with webpack 4+ configuration schema.

fix

Use webpack 3.x or switch to a modern plugin.

Warnings

deprecated Package is unmaintained since 2017; not compatible with webpack 4+ or webpack 5. ↓

fix Use webpack's built-in [contenthash] or a maintained alternative like gulp-rev.

breaking Plugin requires the 'loader-utils' package as a peer dependency. Missing it will cause runtime errors. ↓

fix Run: npm install loader-utils --save-dev

gotcha The plugin modifies files in-place; ensure you have backups or version control. ↓

fix Only run plugin on copies of files or ensure you can revert changes.

gotcha files and templates options expect comma-separated strings for multiple files, not arrays. Example: 'file1.js, file2.js' ↓

fix Pass a single string with comma-separated paths for each property.

deprecated No security updates; potential vulnerabilities in dependencies (loader-utils, webpack 3). ↓

fix Migrate to a modern alternative like webpack-subresource-integrity or html-webpack-plugin with hash.

Install

npm install replacer-contenthash-webpack-plugin

yarn add replacer-contenthash-webpack-plugin

pnpm add replacer-contenthash-webpack-plugin

Imports

default

wrong

import ReplacerContenthashWebpackPlugin from 'replacer-contenthash-webpack-plugin';

correct

const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');

Package is CommonJS-only; ESM import will fail.

ReplacerContenthashWebpackPlugin

wrong

const { ReplacerContenthashWebpackPlugin } = require('replacer-contenthash-webpack-plugin');

correct

const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');

It is a default export, not a named export.

WebpackPluginInstance

wrong

ReplacerContenthashWebpackPlugin({ filesDir: ['src'] })

correct

new ReplacerContenthashWebpackPlugin({ filesDir: ['src'] })

Must be instantiated with new keyword.

Quickstart

Basic webpack config showing plugin instantiation with filesDir and templatesFolder options.

const path = require('path');
const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new ReplacerContenthashWebpackPlugin({
      filesDir: ['src'],
      templatesFolder: ['templates']
    })
  ]
};