前言

官方链接

NormalModuleReplacementPlugin 允许我们将与 resourceRegExp 匹配的资源替换为 newResource。如果 newResource 是相对的,则它是相对于先前资源解析的。如果 newResource 是一个函数,它应该覆盖所提供资源的请求属性。
官方的描述有点绕,简而言之,就是模块的在加载之前进行一个替换,这个替换按照正则表达式resourceRegExp所定义的表达式来实现替换,可以实现到类似于cross-env工具的效果:通过自定义变量的方式来达到根据不同的变量来尽性替换的目的!

如何使用(官方例子)

比如我们 🈶 👇 的一个webpack.config.js配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = function(env){
var appTarget = env.APP_TARGET || 'VERSION_A';
return {
// ... 此处隐藏其他的配置
plugins: [
new NormalModuleReplacement(/(.*)-APP_TARGET(\.*)/, function (resource) {
resource.request = resource.request.replace(
/-APP_TARGET/,
`-${process.env.APP_TARGET}`
);
})
]
}
}

NormalModuleReplacement的简单使用
简单使用对应输出结果

源码解析

NormalModuleReplacement正则匹配并替换的过程
当正则匹配到的时候,执行它的回调方法,也就是说这个插件的构造方法中的第一个参数是一个正则表达式,第二个参数可以是一个回调函数(实现动态替换),也可以是一个字符串