> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# NormalModuleReplacementPlugin

The `NormalModuleReplacementPlugin` allows you to replace resources that match `resourceRegExp` with `newResource`.

If `newResource` is relative, it is resolved relative to the previous resource.

If `newResource` is a function, it is expected to overwrite the request attribute of the supplied resource.

This can be useful for allowing different behaviour between builds.

:::tip
Note that the `resourceRegExp` is tested against the "request" on `beforeResolve` phase and the "resource" on `afterResolve` phase.

Also, please note that when using Windows, you have to accommodate for the different folder separator symbol. E.g. `/src\/environments\/environment\.ts/` won't work on Windows, you have to use `/src[\\/]environments[\\/]environment\.ts/` instead.
:::

## Examples

### Basic example

Replace a specific module when building for a production environment.

Say you have a configuration file `some/path/config.development.js` and a special version for production in `some/path/config.production.js`

Add the following plugin when building for production:

```js
new rspack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js',
);
```

### Advanced example

Conditional build depending on a specified environment.

Say you want a configuration with specific values for different build targets.

```js
export default function getRspackConfig(env) {
  const appTarget = env.APP_TARGET || 'VERSION_A';
  return {
    plugins: [
      new rspack.NormalModuleReplacementPlugin(
        /(.*)-APP_TARGET(\.*)/,
        function (resource) {
          resource.request = resource.request.replace(
            /-APP_TARGET/,
            `-${appTarget}`,
          );
        },
      ),
    ],
  };
}
```

Create the two configuration files:

```js title="app/config-VERSION_A.js"
export const config = {
  title: 'I am version A',
};
```

```js title="app/config-VERSION_B.js"
export const config = {
  title: 'I am version B',
};
```

Then import that configuration using the keyword you're looking for in the regexp:

```js
import { config } from './app/config-APP_TARGET';
console.log(config.title);
```

And now you get the right configuration imported depending on which target you're building for:

```bash
rspack --env APP_TARGET=VERSION_A
=> 'I am version A'

rspack --env APP_TARGET=VERSION_B
=> 'I am version B'
```

## Options

The plugin accepts two positional arguments.

### resourceRegExp

- **Type:** `RegExp`

Matches the module request during `beforeResolve` and the resolved resource during `afterResolve`.

### newResource

- **Type:** `string | ((data: ResolveData) => void)`

A replacement request or a function that updates the supplied resolve data. Relative replacement requests are resolved relative to the original resource.


This page is adapted from [webpack documentation](https://webpack.js.org/plugins/normal-module-replacement-plugin/) under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), with modifications.