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'

Basic Example

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(

Advanced Example

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(
        function (resource) {
          resource.request = resource.request.replace(

Create the two configuration files:


export default {
  title: 'I am version A',


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';

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'

3 位贡献者