NormalModuleReplacementPlugin 插件

webpackjsorg-main插件参考

NormalModuleReplacementPlugin 插件

NormalModuleReplacementPlugin 允许你将匹配 resourceRegExp 的资源替换为 newResource。如果 newResource 是相对路径，则相对于先前资源进行解析。如果 newResource 是一个函数，则预期该函数会覆盖所提供资源的 request 属性。

这对于在不同的构建之间实现不同行为非常有用。

js 复制代码

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

注意，resourceRegExp 是针对你在代码中编写的请求（request）进行匹配，而不是针对解析后的资源。例如，当你编写 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。

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

js 复制代码

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

高级示例

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

假设你希望针对不同的构建目标使用具有特定值的配置。

js 复制代码

export default (env) => {
  const appTarget = env.APP_TARGET || "VERSION_A";
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/-APP_TARGET$/, (resource) => {
        resource.request = resource.request.replace(
          /-APP_TARGET/,
          `-${appTarget}`,
        );

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

创建两个配置文件：

app/config-VERSION_A.js

js 复制代码

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

app/config-VERSION_B.js

js 复制代码

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

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

js 复制代码

import config from "app/config-APP_TARGET";

console.log(config.title);

现在，根据你构建的目标，导入的配置会正确：

bash 复制代码

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

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。