其他配置选项

其他配置选项

以下是 webpack 支持的其他配置选项。

W> 需要帮助：此页面仍在建设中。如果您熟悉任何描述或示例不完整的选项，请在 docs 仓库 提交 issue 或 PR。

amd

object boolean: false

设置 require.amd 或 define.amd 的值。将 amd 设置为 false 将禁用 webpack 的 AMD 支持。

webpack.config.js

export default {
  // ...
  amd: {
    jQuery: true,
  },
};

某些为 AMD 编写的流行模块（尤其是 jQuery 1.7.0 至 1.9.1 版本）仅当加载器表明其已对页面上包含多个版本的情况做出特殊处理时，才会注册为 AMD 模块。

这些特殊处理包括限制注册到特定版本，或支持具有不同已定义模块的不同沙箱。

此选项允许您将模块所查找的键设置为真值。实际上，webpack 的 AMD 支持会忽略已定义的名称。

bail

boolean = false

在第一个错误出现时立即失败，而不是容忍错误继续执行。默认情况下，webpack 会在终端中以红色显示这些错误，在使用 HMR 时也会在浏览器控制台中显示，但会继续打包。启用方式：

webpack.config.js

export default {
  // ...
  bail: true,
};

这将强制 webpack 退出其打包过程。

W> 避免在 watch 模式下使用 bail 选项，因为它会在发现错误时强制 webpack 尽快退出。

dependencies

[string]

一个 name 列表，用于定义它所依赖的所有兄弟配置。被依赖的配置需要先编译。

在 watch 模式下，当以下情况发生时，依赖项将使编译器失效：

1. 依赖项已更改
2. 依赖项正在编译或已失效

请注意，当前配置在其依赖项编译完成之前不会开始编译。

webpack.config.js

export default [
  {
    name: "client",
    target: "web",
    // …
  },
  {
    name: "server",
    target: "node",
    dependencies: ["client"],
  },
];

ignoreWarnings

[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]

告诉 webpack 忽略特定的警告。可以通过 RegExp、自定义 function 或 object 来实现：

• RegExp：匹配警告消息。
• function：接收原始警告实例（WebpackError 和 Compilation）作为参数，返回 boolean 值来决定是否忽略该警告。
• object：包含以下属性：
  • file：一个 RegExp，用于匹配警告的来源文件。
  • message：一个 RegExp，用于匹配警告消息。
  • module：一个 RegExp，用于匹配警告的来源模块。

ignoreWarnings 必须是上述任意一种或多种类型组成的 数组。

export default {
  // ...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // 一个 RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    /warning from compiler/,
    (warning) => true,
  ],
};

loader

object

将自定义值暴露到 loader 上下文 中。

例如，您可以在 loader 上下文中定义一个变量：

webpack.config.js

export default {
  // ...
  loader: {
    answer: 42,
  },
};

然后在 loader 中使用 this.answer 来获取其值：

自定义-loader.js

export default function (source) {
  // ...
  console.log(this.answer); // 此处将输出 `42`
  return source;
}

T> webpack 会将 loader 对象中定义的所有属性复制到 loader 上下文，因此您可以覆盖 loader 上下文中的属性。

name

string

配置的名称。在加载多个配置时使用。

当导出配置数组时，这尤其有用。webpack 使用 name 在日志和统计输出中标识每个配置。

webpack.config.js

export default {
  // ...
  name: "admin-app",
};

对于多配置构建：

export default [
  {
    name: "client",
    target: "web",
    // ...
  },
  {
    name: "server",
    target: "node",
    // ...
  },
];

parallelism

number = 100

限制并行处理的模块数量。可用于微调性能或获得更可靠的分析结果。

较低的值会减少并发工作和内存压力，但可能会增加总构建时间。较高的值可以在高性能机器上提高吞吐量。

webpack.config.js

export default {
  // ...
  parallelism: 50,
};

使用场景：

• 当构建遇到内存限制时（例如在资源受限的 CI 运行器中）降低 parallelism。
• 当您拥有足够的 CPU 和内存并希望最大化构建吞吐量时，增加该值。

profile

boolean

捕获应用程序的“配置文件”，包括统计信息和提示，然后可以使用 Analyze 工具对其进行分析。它还会输出模块耗时摘要。

webpack.config.js

export default {
  // ...
  profile: true,
};

T> 将 profile: true 与 parallelism: 1 结合使用可以获得准确的耗时。请注意，这也会减慢构建速度。

recordsInputPath

string

指定从哪个文件读取上一组 records。这可用于重命名 records 文件。参见下面的示例。

设置此选项后，webpack 会从该路径读取先前生成的 records，并将其用作稳定模块/代码块 ID 追踪的输入。

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsInputPath: path.join(__dirname, "records.json"),
  recordsOutputPath: path.join(__dirname, "records-next.json"),
};

recordsOutputPath

string

指定 records 文件的写入位置。以下示例展示了如何将此选项与 recordsInputPath 结合使用来重命名 records 文件：

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsInputPath: path.join(__dirname, "records.json"),
  recordsOutputPath: path.join(__dirname, "newRecords.json"),
};

recordsPath

string

使用此选项生成一个包含 webpack “records”的 JSON 文件——这些数据用于在多次构建之间存储模块标识符。您可以使用此文件来跟踪模块在构建之间的变化。要生成该文件，请指定一个位置：

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsPath: path.join(__dirname, "records.json"),
};

如果您有利用 代码分割 的复杂设置，records 尤其有用。该数据可用于确保分割后的 bundle 达到您所需的 缓存 行为。

T> 注意，尽管此文件由编译器生成，您可能仍希望将其纳入版本控制，以保留其随时间变化的记录。

W> 设置 recordsPath 本质上会将 recordsInputPath 和 recordsOutputPath 设置为相同的位置。通常这已经足够了，除非您决定更改包含 records 的文件名。参见下面的示例。

snapshot

object

snapshot 选项决定了文件系统快照的创建和失效方式。

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, "../node_modules")],
    immutablePaths: [],
    unmanagedPaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    contextModule: {
      hash: true,
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

buildDependencies

object = { hash boolean = true, timestamp boolean = true }

使用持久化缓存时，为构建依赖项创建快照。

• hash：比较内容哈希来确定失效（比 timestamp 更消耗性能，但变化频率更低）。
• timestamp：比较时间戳来确定失效。

hash 和 timestamp 都是可选的。

• { hash: true }：适用于 CI 缓存，因为全新检出通常不保留时间戳，需要使用哈希。
• { timestamp: true }：适用于本地开发缓存。
• { timestamp: true, hash: true }：适用于上述两种情况。首先比较时间戳，这更廉价，因为 webpack 无需读取文件来计算其哈希。仅当时间戳相同时才会比较内容哈希，这会对首次构建造成轻微的性能影响。

immutablePaths

(RegExp | string)[]

由包管理器管理且路径中包含版本号或哈希值的路径数组，这些路径下的所有文件都是不可变的。

如果使用正则表达式，请务必将路径包裹在捕获组中。

managedPaths

(RegExp | string)[]

由包管理器管理且可以相信不会被其他方式修改的路径数组。

如果您使用正则表达式，请务必用捕获组包裹路径，以便 webpack 能够提取路径。例如，webpack 内部用于匹配 node_modules 目录的正则表达式如下：

/^(.+?[\\/]node_modules)[\\/]/

managedPaths 的一个常见用途是从 node_modules 中排除某些文件夹，例如，您希望 webpack 知道 node_modules/@azure/msal-browser 文件夹中的文件预期会发生变化，这可以通过如下正则表达式实现：

export default {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

unmanagedPaths