CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

NormalModuleReplacementPlugin

NormalModuleReplacementPlugin 可以帮你把 resourceRegExp 匹配的 import/require 等模块请求(后面简称请求request)替换为 newResource

new rspack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

如果 newResource 是相对路径,则会相对于先前的资源进行解析。

如果 newResource 是一个函数,rspack 会传入请求数据,你应该在该函数中修改请求数据,比如 resource.request = resource.request + '.ibm'

这对于需要根据不同的情况使用不同的模块时非常有用。

TIP

请注意,resourceRegExpbeforeResolve 阶段跟 request 做匹配,在 afterResolve 阶段跟 resource 做匹配。前者是你在代码里写的请求字符串,后者是解析后的真实完整路径。

此外,请注意,在使用 Windows 时,你必须适应不同的路径分隔符。例如,/src\/environments\/environment\.ts/ 在 Windows 上无法工作,相应的,你应该使用 /src[\\/]environments[\\/]environment\.ts/

基本用法示例

以“为生产构建使用特定的模块”这个目标为例。

假设你有一个用于开发的配置文件 some/path/config.development.js 和一个专门用于生产的版本 some/path/config.production.js

可以在生产构建时这样配置该插件:

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

高级用法示例

根据指定的环境条件构建。

假设你希望为不同的构建目标使用不同的配置:

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}`,
          );
        },
      ),
    ],
  };
};

创建两个配置文件:

app/config-VERSION_A.js
export const config = {
  title: '版本 A',
};
app/config-VERSION_B.js
export const config = {
  title: '版本 B',
};

然后根据插件配置中使用的 APP_TARGETimport 这个文件:

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

现在,根据你的构建目标,将导入相应的配置:

rspack --env APP_TARGET=VERSION_A
=> '版本 A'

rspack --env APP_TARGET=VERSION_B
=> '版本 B'