NormalModuleReplacementPlugin

​NormalModuleReplacementPlugin​ 允许你用 ​newResource​ 替换匹配 ​resourceRegExp​ 的资源。如果 ​newResource​ 是相对的，它将相对于前一个资源进行解析。如果 ​newResource​ 是一个函数，它将覆盖所提供资源的请求属性。

这对于允许不同构建之间的不同行为非常有用。

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

Note：
​resourceRegExp​ 是针对你在代码中编写的请求进行测试的，而不是解析的资源。例如，当你写了一段 ​import sum from './sum'​ 的代码时，​'./sum'​ 将会被用来测试而不是 ​'./sum.js'​。

Basic Example

在为开发环境构建时替换特定模块。

假设您有一个配置文件 some/path/config.development.module.js 和一个特殊版本的生产文件 some/path/config.production.module.js

在构建生产环境时添加以下插件:

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

Advanced Example

根据指定环境的条件生成。

假设您想要一个针对不同构建目标具有特定值的配置。

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

创建两个配置文件:

app/config-VERSION_A.js

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

app/config-VERSION_B.js

export default {
  title: 'I am version B',
};

然后使用你在regexp中寻找的关键字导入该配置:

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

现在，您可以根据要构建的目标导入正确的配置:

npx webpack --env APP_TARGET=VERSION_A
=> 'I am version A'

npx webpack --env APP_TARGET=VERSION_B
=> 'I am version B'