string-replace-loader

What is string-replace-loader?

string-replace-loader is a webpack loader that allows you to replace strings in your files during the build process. This can be useful for tasks such as replacing environment variables, removing debug code, or making other text substitutions in your source files.

What are string-replace-loader's main functionalities?

Basic String Replacement

This feature allows you to replace a specific string with another string in your JavaScript files. In this example, every occurrence of 'foo' in the .js files will be replaced with 'bar'.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: 'foo',
          replace: 'bar',
        },
      },
    ],
  },
};

Regular Expression Replacement

This feature allows you to use regular expressions for more complex string replacements. In this example, any string matching the pattern 'foo' followed by one or more digits will be replaced with 'bar'.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: /foo\d+/g,
          replace: 'bar',
        },
      },
    ],
  },
};

Multiple Replacements

This feature allows you to perform multiple string replacements in a single pass. In this example, 'foo' will be replaced with 'bar' and 'baz' will be replaced with 'qux' in the .js files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            { search: 'foo', replace: 'bar' },
            { search: 'baz', replace: 'qux' }
          ],
        },
      },
    ],
  },
};

Other packages similar to string-replace-loader

replace-in-file

replace-in-file is a utility for making string replacements in files. Unlike string-replace-loader, which is a webpack loader, replace-in-file is a standalone utility that can be used in any Node.js script or command line. It offers similar functionality for string replacements but is not integrated into the webpack build process.

babel-plugin-transform-replace-expressions

babel-plugin-transform-replace-expressions is a Babel plugin that allows you to replace expressions in your JavaScript code. While it offers similar string replacement capabilities, it is specifically designed to work with Babel and its ecosystem, making it a good choice if you are already using Babel in your project.

gulp-replace

gulp-replace is a Gulp plugin for string replacement in files. It provides similar functionality to string-replace-loader but is designed to be used within a Gulp build process. If you are using Gulp instead of webpack, gulp-replace would be a more appropriate choice.

README

Replace loader for Webpack

Perform replacements (plain and regular expression) in the contents loaded by the loader.

Install:

$ yarn add --dev string-replace-loader

With release of 2.0.0 the loader is expected to be used in Node v4+ environment. Support for Node v3 and lower was dropped, but you can install and use the loader version of 1.3.0 in older environments.

With release of 3.0.0 the loader is expected to be used with Webpack v5+. Support for Webpack v4 and lower was dropped, but you can install and use the loader version of 2.3.0 in older environments.

Usage:

Loader allows to perform replacements in a way String.prototype.replace() does (loader uses it internally). It means that if you want to replace all occurrences, you should use RegExp-like string in options.search with g flag in options.flags, etc.

Plain replacement:

Plain string replacement, no need to escape RegEx special characters.

In your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: '$',
          replace: 'window.jQuery',
        }
      }
    ]
  }
}

RegEx replacement:

To achieve regular expression replacement you should either specify the search option as RegExp instance, either specify it as string and add the flags option (as an empty string if you do not want any flags). In the latter case, search and flags are being passed to the RegExp constructor and this means that you should escape RegEx special characters in search if you want it to be replaced as a string.

In your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: /\$/i,
          replace: 'window.jQuery'
        }
      }
    ]
  }
}

or

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: '\$',
          replace: 'window.jQuery',
          flags: 'i'
        }
      }
    ]
  }
}

Multiple replacement:

Also, you can pass an array of search-replace pairs this way:

In your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
             { search: 'jQuery', replace: 'window.$' },
             { search: '_', replace: 'window.lodash' }
          ]
        }
      }
    ]
  }
}

Callback replacement

You can specify a callback function to have dynamic replacement values. The context of this function will be the context of the loader.

In your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: '^Hello, (.*)!$',
          replace(match, p1, offset, string) {
            console.log(`Replace "${match}" in file "${this.resource}".`)
            return `Bonjour, ${p1.toUpperCase()}!`
          },
          flags: 'g'
        }
      }
    ]
  }
}

Strict mode replacement:

You can enable strict mode to ensure that the replacement was performed. Loader will throw exception if nothing was replaced or if search or replace options were not specified.

In your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: 'jQuery',
          replace: 'window.$',
          strict: true
        }
      }
    ]
  }
}

Contributing:

Feel free to open issues to propose stuff and participate. Pull requests are also welcome.

Licence:

MIT