ReplaceInFileWebpackPlugin

1.0.6 verified Sat Apr 25 auth: no javascript

A webpack plugin that replaces strings in files after the compilation is done. Version 1.0.6 (latest) provides a simple API to define replacement rules for files in specified directories, supporting both string and regex patterns with string or function replacements. It is useful for modifying output files (HTML, CSS, JS) that are not processed by loaders. Compared to alternatives like string-replace-webpack-plugin, it offers a cleaner configuration with an array of rule sets and supports multiple file matching via `files` or `test` patterns.

Common errors

error TypeError: ReplaceInFileWebpackPlugin is not a constructor ↓

cause Importing the plugin incorrectly, e.g., destructuring a named export that doesn't exist.

fix

Use const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin'); or import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';

error Error: Cannot find module 'replace-in-file-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install replace-in-file-webpack-plugin --save-dev

error Error: The provided value must be an array of configurations ↓

cause Passing a single config object instead of an array.

fix

Wrap your config in an array: new ReplaceInFileWebpackPlugin([{ ... }])

Warnings

gotcha The `replace` option in rules can be a string or function, but if the function returns a non-string value (e.g., undefined), it will be converted to the string 'undefined'. ↓

fix Ensure replace functions always return a string.

gotcha If both `files` and `test` are omitted, no files will be processed. The plugin requires at least one of these to specify target files. ↓

fix Provide either `files` (array of filenames) or `test` (regex or array of regexes) in each config object.

gotcha The plugin does not support glob patterns in `files`; only exact filenames are matched. ↓

fix Use `test` with regex if you need pattern matching, or list all filenames explicitly.

Install

npm install replace-in-file-webpack-plugin

yarn add replace-in-file-webpack-plugin

pnpm add replace-in-file-webpack-plugin

Imports

ReplaceInFileWebpackPlugin

wrong

const { ReplaceInFileWebpackPlugin } = require('replace-in-file-webpack-plugin')

correct

import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin'

Default export; named import will fail.

ReplaceInFileWebpackPlugin

wrong

const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin').default

correct

const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin')

CommonJS require works without .default.

Quickstart

Shows how to configure the plugin in webpack.config.js to replace placeholders in output files.

// webpack.config.js
const path = require('path');
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new ReplaceInFileWebpackPlugin([
      {
        dir: 'dist',
        files: ['index.html'],
        rules: [
          { search: '{{VERSION}}', replace: '1.0.0' },
          { search: /@year/g, replace: '2024' },
        ],
      },
    ]),
  ],
};