#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.

#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.

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:

export const config = {
  title: 'I am version A',
};

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'

This page is adapted from webpack documentation under the CC BY 4.0, with modifications.