Webpack-content-replacer-plugin NPM

Node dependency

Replace content in file in webpack workflow

Edit file by replacing content at different build step in a webpack workflow.

For example, you can change text color, text content or also insert configuration values from environment variables.

Installing

npm i webpack-content-replacer-plugin

Getting started in webpack

Require webpack-content-replacer-plugin

var ContentReplacerWebpackPlugin = require('webpack-content-replacer-plugin')

Add the plugin to your plugin list

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      modifiedFile: './relative_path/file_to_be_modified.ext',
      modifications: [
        {
          regex: /%content_to_be_deleted%/g,
          modification: 'new_content',
        },
        {
          regex: /%content2_to_be_deleted%/g,
          modification: 'new_content2',
        },
      ],
    })
  ]
}

Configuration

modifiedFile

Type: String
Default: no default value
Required: true

Specify the file which will be modified.

Example:

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      modifiedFile: './build/index.html',
      ...
    })
  ]
}

modifications

Type: Array<Modification>
Default: no default value
Required: true

Specify the modifications to be applied to the file.

Example:

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      modifiedFile: './build/index.html',
      [
        {
          regex: /text/g,
          modification: 'new text'
        }
      ],
      ...
    })
  ]
}

modification

Type: Object
Default: no default value
Required: true

Example:

{
  regex: /text/g,
  modification: 'new text'
}

buildTrigger

Type: String
Default: after-emit
Allowed values: after-emit, done

Specify webpack build step (c.f plugin documentation).

Example:

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      modifiedFile: './build/index.html',
      [
        {
          regex: /text/g,
          modification: 'new text'
        }
      ],
      buildTrigger: 'done',
      ...
    })
  ]
}

logLevel

Type: String
Default: strict
Allowed value: strict, log, none
- strict: catch errors in an exception, the webpack build crashes
- log: log errors in a log file (warning.log) and none behavior
- none: show errors in console (when silent mode is off)

Specify behavior when the plugin fail.

Example:

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      modifiedFile: './build/index.html',
      [
        {
          regex: /text/g,
          modification: 'new text'
        }
      ],
      buildTrigger: 'done',
      logLevel: 'log'
      ...
    })
  ]
}

silent

Type: Boolean
Default: false

Display/hide info logs during the build.

Example:

var config = {
  plugins: [
    new ContentReplacerWebpackPlugin({
      silent: true,
      modifiedFile: './build/index.html',
      [
        {
          regex: /text/g,
          modification: 'new text'
        }
      ],
      buildTrigger: 'done'
      ],
    })
  ]
}

Developing

git clone https://github.com/{your fork}/webpack-content-replacer-plugin.git
cd webpack-content-replacer-plugin/
npm install

Replace {your fork} by your github username.

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. All contributions are welcome. Please make a pull request and make sure things still pass after running npm test. Ensure you've read the contribution guidelines for more information and respect the code of conduct