本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。
以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。
NormalModuleReplacementPlugin 可以帮你把 resourceRegExp 匹配的 import/require 等模块请求(后面简称 请求 或 request)替换为 newResource。
new rspack.NormalModuleReplacementPlugin(resourceRegExp, newResource);如果 newResource 是相对路径,则会相对于先前的资源进行解析。
如果 newResource 是一个函数,rspack 会传入请求数据,你应该在该函数中修改请求数据,比如 resource.request = resource.request + '.ibm'。
这对于需要根据不同的情况使用不同的模块时非常有用。
请注意,resourceRegExp 在 beforeResolve 阶段跟 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}`,
);
},
),
],
};
};创建两个配置文件:
export const config = {
title: '版本 A',
};export const config = {
title: '版本 B',
};然后根据插件配置中使用的 APP_TARGET 来 import 这个文件:
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'