NormalModuleReplacementPlugin

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

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

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

请注意，resourceRegExp 是针对你在代码中编写的请求进行测试的，而不是针对已解析的资源。例如，当你有代码 import sum from './sum' 时，'./sum' 将用于测试，而不是 './sum.js'。

另外请注意，在使用 Windows 时，你必须适应不同的文件夹分隔符符号。例如，/src\/environments\/environment\.ts/ 在 Windows 上不起作用，你必须使用 /src[\\/]environments[\\/]environment\.ts/,。

基本示例

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

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

为生产构建时添加以下插件

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

高级示例

根据 指定的环境 进行条件构建。

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

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

然后使用正则表达式中要查找的关键字导入该配置

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'