NormalModuleReplacementPlugin

NormalModuleReplacementPlugin 允许你将与 resourceRegExp 匹配的资源替换为 newResource。如果 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}`
        );

        if (resource.createData) {
          resource.createData.request = resource.request;
        }
      }),
    ],
  };
};

创建这两个配置文件

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'