The NormalModuleReplacementPlugin
allows you to replace resources that match resourceRegExp
with 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.
new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);
注意,resourceRegExp
是针对你在代码中编写的请求进行测试的,而不是解析的资源。例如,当你写了一段 import sum from './sum'
的代码时,'./sum'
将会被用来测试而不是 './sum.js'
。
Replace a specific module when building for a development environment.
Say you have a configuration file some/path/config.development.module.js
and a special version for production in some/path/config.production.module.js
Add the following plugin when building for production:
new webpack.NormalModuleReplacementPlugin(
/some\/path\/config\.development\.js/,
'./config.production.js'
);
Conditional build depending on an specified environment.
Say you want a configuration with specific values for different build targets.
module.exports = function (env) {
var appTarget = env.APP_TARGET || 'VERSION_A';
return {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/(.*)-APP_TARGET(\.*)/,
function (resource) {
resource.request = resource.request.replace(
/-APP_TARGET/,
`-${appTarget}`
);
}
),
],
};
};
Create the two configuration files:
app/config-VERSION_A.js
export default {
title: 'I am version A',
};
app/config-VERSION_B.js
export default {
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:
npx webpack --env APP_TARGET=VERSION_A
=> 'I am version A'
npx webpack --env APP_TARGET=VERSION_B
=> 'I am version B'