close
Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute
CC 4.0 License

The content of this section is derived from the content of the following links and is subject to the CC BY 4.0 license.

The following contents can be assumed to be the result of modifications and deletions based on the original contents if not specifically stated.

NormalModuleReplacementPlugin

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

new rspack.NormalModuleReplacementPlugin(resourceRegExp, 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.

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:

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.

module.exports = 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:

app/config-VERSION_A.js
export const config = {
  title: 'I am version A',
};
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:

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:

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

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