其它选项

这里是 webpack 支持的其它选项。

amd

object boolean: false

设置 require.amddefine.amd 的值。设置 amdfalse 会禁用 webpack 的 AMD 支持。

webpack.config.js

module.exports = {
  //...
  amd: {
    jQuery: true,
  },
};

某些流行的模块是按照 AMD 规范编写的,最引人瞩目的 jQuery 版本在 1.7.0 到 1.9.1,如果 loader 提示它对页面包含的多个版本采取了特殊许可时,才会注册为 AMD 模块。

许可权限是具有「限制指定版本注册」或「支持有不同定义模块的不同沙盒」的能力。

此选项允许将模块查找的键(key)设置为真值(truthy value)。 发生这种情况时,webpack 中的 AMD 支持将忽略定义的名称。

bail

boolean = false

在第一个错误出现时抛出失败结果,而不是容忍它。默认情况下,当使用 HMR 时,webpack 会将在终端以及浏览器控制台中,以红色文字记录这些错误,但仍然继续进行打包。要启用它:

webpack.config.js

module.exports = {
  //...
  bail: true,
};

这将迫使 webpack 退出其打包过程。

cache

boolean object

缓存生成的 webpack 模块和 chunk,来改善构建速度。cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用。 cache: truecache: { type: 'memory' } 配置作用一致。 传入 false 会禁用缓存:

webpack.config.js

module.exports = {
  //...
  cache: false,
};

当将 cache.type 设置为 'filesystem' 是会开放更多的可配置项。

cache.allowCollectingMemory

收集在反序列化期间分配的未使用的内存,仅当 cache.type 设置为 'filesystem' 时生效。这需要将数据复制到更小的缓冲区中,并有性能成本。

  • Type: boolean
    • It defaults to false in production mode and true in development mode.
  • 5.35.0+

webpack.config.js

module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};

cache.buildDependencies

object

cache.buildDependencies 是一个针对构建的额外代码依赖的数组对象。webpack 将使用这些项和所有依赖项的哈希值来使文件系统缓存失效。

默认是 webpack/lib 来获取 webpack 的所有依赖项。

webpack.config.js

module.exports = {
  cache: {
    buildDependencies: {
      // This makes all dependencies of this file - build dependencies
      config: [__filename],
      // 默认情况下 webpack 与 loader 是构建依赖。
    },
  },
};

cache.cacheDirectory

string

缓存的。默认为 node_modules/.cache/webpack

cache.cacheDirectory 选项仅当 cache.type 被设置成 'filesystem' 才可用。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.temp_cache'),
  },
};

cache.cacheLocation

string

缓存的路径。默认值为 path.resolve(cache.cacheDirectory, cache.name).

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheLocation: path.resolve(__dirname, '.test_cache'),
  },
};

cache.hashAlgorithm

string

用于哈希生成的算法。详情请参阅 Node.js crypto。默认值为 md4.

cache.hashAlgorithm 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    hashAlgorithm: 'md4',
  },
};

cache.idleTimeout

number = 60000

时间以毫秒为单位。cache.idleTimeout 表示缓存存储发生的时间间隔。

cache.idleTimeout 配置项仅在 [cache.type] 'filesystem' 时生效。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeout: 60000,
  },
};

cache.idleTimeoutForInitialStore

number = 0

单位毫秒。 cache.idleTimeoutForInitialStore 是在初始缓存存储发生后的时间段。

cache.idleTimeoutForInitialStore 配置项仅在 [cache.type] 'filesystem' 时生效。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

[string] = ['./node_modules']

cache.managedPaths 是仅托管路径的包管理器数组。webpack 将避免将他们进行哈希和时间戳处理,假设版本是唯一的,并将其用作快照(用于内存和文件系统缓存)。

cache.maxAge

number = 5184000000

5.30.0+

允许未使用的缓存留在文件系统缓存中的时间(以毫秒为单位);默认为一个月。

cache.maxAge 仅在 cache.type 设置为 'filesystem' 时生效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxAge: 5184000000,
  },
};

cache.maxGenerations

number

5.30.0+

定义内存缓存中未使用的缓存项的生命周期。

  • cache.maxGenerations: 1: 在一次编译中未使用的缓存被删除。

  • cache.maxGenerations: Infinity: 缓存将永远保存。

cache.maxGenerations 配置项仅在 cache.type 设置为 'memory' 时有效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'memory',
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations {#cachemaxMemorygenerations}

number

5.30.0+

定义内存缓存中未使用的缓存项的生命周期。

  • cache.maxMemoryGenerations: 0: 持久化缓存不会使用额外的内存缓存。它只将项目缓存到内存中,直到它们被序列化到磁盘。一旦序列化,下一次读取将再次从磁盘反序列化它们。这种模式将最小化内存使用,但会带来性能成本。

  • cache.maxMemoryGenerations: 1: 这将从内存缓存中清除已序列化且在至少一次编译中未使用的项。当再次使用它们时,它们将从磁盘反序列化。这种模式将最小化内存使用量,同时仍将活动项保留在内存缓存中。

  • cache.maxMemoryGenerations: 大于 0 的小数字将为 GC 操作带来性能成本。它会随着数字的增加而降低。

  • cache.maxMemoryGenerations: development 模式下默认为 10,production 模式下默认为 Infinity

cache.maxMemoryGenerations 配置项仅在 cache.type 设置为 'filesystem' 时有效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: Infinity,
  },
};

cache.name

string

缓存的名称。不同的名字会导致不同的的共存的缓存。默认值为 ${config.name}-${config.mode}。使用 cache.name 当你有多份配置的时候,是比较合理的因为会有配置会有独立的缓存。

cache.name 选项仅当 cache.type 被设置成 'filesystem' 的时候可进行配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    name: 'AppBuildCache',
  },
};

cache.profile

boolean = false

跟踪并记录各个 'filesystem' 缓存项的详细时间信息。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    profile: true,
  },
};

cache.store

string = 'pack': 'pack'

cache.store 告诉 webpack 什么时候将数据存放在文件系统中。

  • 'pack': 当编译器闲置时候,将缓存数据都存放在一个文件中

cache.store 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
  },
};

cache.type

string: 'memory' | 'filesystem'

cache 类型设置为内存或者文件系统。memory 选项很简单,它告诉 webpack 在内存中存储缓存,不允许额外的配置:

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
  },
};

cache.version

string = ''

缓存数据的版本。不同版本不会允许重用缓存和重载当前的内容。当配置以一种无法重用缓存的方式改变时,要更新缓存的版本。这会让缓存失效。

cache.version 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    version: 'your_version',
  },
};

dependencies

[string]

一个 name 列表,定义它所依赖的所有兄弟(sibling)配置。需要首先编译依赖的配置。

在 watch 模式下,当出现以下情况时,依赖项将使编译器失效:

  1. 依赖项发生变化
  2. 依赖项当前正在编译或者处于无效状态

请记住,在完成依赖项编译之前,不会编译此配置。

webpack.config.js

module.exports = [
  {
    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。如果类型为函数,可基于原始 warning 来选择性展示警告,其参数分别为 WebpackErrorCompilation,且返回值为 boolean。还可以包含以下属性的 object

  • file: 类型为 RegExp,用于选择出现警告的源文件。
  • message: 类型为 RegExp,用于选择警告的内容。
  • module: 类型为 RegExp,用于选择警告来源的模块。

ignoreWarnings 可以是上述任意类型组成的 array

module.exports = {
  //...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // A RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    (warning) => true,
  ],
};

loader

object

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

例如,你可以在 loader 上下文中定义一个新变量:

webpack.config.js

module.exports = {
  // ...
  loader: {
    answer: 42,
  },
};

然后使用 this.answer 在 loader 中获取该值:

custom-loader.js

module.exports = function (source) {
  // ...
  console.log(this.answer); // will log `42` here
  return source;
};

parallelism

number = 100

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

profile

boolean

捕获一个应用程序"配置文件",包括统计和提示,然后可以使用 Analyze 分析工具进行详细分析。

recordsPath

string

开启这个选项可以生成一个 JSON 文件,其中含有 webpack 的 "records" 记录 - 即「用于存储跨多次构建(across multiple builds)的模块标识符」的数据片段。可以使用此文件来跟踪在每次构建之间的模块变化。只要简单的设置一下路径,就可以生成这个 JSON 文件:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsPath: path.join(__dirname, 'records.json'),
};

如果你使用了代码分离(code splittnig)这样的复杂配置,records 会特别有用。这些数据用于确保拆分 bundle,以便实现你需要的缓存(caching)行为。

recordsInputPath

string

指定读取最后一条记录的文件的名称。这可以用来重命名一个记录文件,可以查看下面的实例:

recordsOutputPath

string

指定记录要写入的位置。以下示例描述了如何用这个选项和 recordsInptuPaht 来重命名一个记录文件:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsInputPath: path.join(__dirname, 'records.json'),
  recordsOutputPath: path.join(__dirname, 'newRecords.json'),
};

name

string

配置的名称。当加载不同的配置时会被使用。

webpack.config.js

module.exports = {
  //...
  name: 'admin-app',
};

infrastructureLogging

用于基础设施水平的日志选项。

object = {}

appendOnly

5.31.0+

boolean

将内容追加到现有输出中,而非更新现有输出,这对于展示状态信息来说非常有用。此选项仅在未提供自定义 console 的情况下使用。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    appendOnly: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.status('first output'); // this line won't be overridden with `appendOnly` enabled
      logger.status('second output');
    },
  ],
};

colors

5.31.0+

boolean

为基础设施日志启用带有颜色的输出。此选项仅在未提供自定义 console 的情况下使用。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    colors: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.log('this output will be colorful');
    },
  ],
};

console

5.31.0+

Console

为基础设施日志提供自定义方案。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    console: yourCustomConsole(),
  },
};

level

string

开启基础设施日志输出。与 stats.logging 选项类似但仅仅是对于基础设施而言。没有默认值提供。

可能的取值:

  • 'none' - 禁用日志
  • 'error' - 仅仅显示错误
  • 'warn' - 仅仅显示错误与告警
  • 'info' - 显示错误、告警与信息
  • 'log' - 显示错误、告警,信息,日志信息,组别,清楚。 收缩的组别会在收缩的状态中被显示。
  • 'verbose' - 输出所有日志除了调试与追踪。收缩的组别会在扩展的状态中被显示。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
  },
};

debug

string RegExp function(name) => boolean [string, RegExp, function(name) => boolean]

开启特定日志比如插件(plugins)和加载器(loaders)的调试信息。 与 stats.loggingDebug 选项类似但仅仅对于基础设施而言。没有默认配置提供。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
    debug: ['MyPlugin', /MyPlugin/, (name) => name.contains('MyPlugin')],
  },
};

stream

5.31.0+

NodeJS.WritableStream = process.stderr

用于日志输出的流。默认为 process.stderr。此选项仅在未提供自定义 console 的情况下使用。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    stream: process.stderr,
  },
};

snapshot

object

snapshot 配置项决定文件系统是如何创建和无效快照。

webpack.config.js

const path = require('path');
module.exports = {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, '../node_modules')],
    immutablePaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

managedPaths

[string]

由包管理器管理的路径数组,可以信任它不会被修改。

immutablePaths

[string]

由包管理器管理的路径数组,在其路径中包含一个版本或哈希,以便所有文件都是不可变的(immutable)。

buildDependencies

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

使用持久化缓存时的依赖构建关系快照。

  • hash:比较内容哈希以确定无效(比 timestamp 更昂贵,但更改的频率较低)。
  • timestamp:比较 timestamps 以确定无效。

hashtimestamp 都是可选配置。

  • { hash: true }:对 CI 缓存很有帮助,使用新的 checkout,不需要保存时间戳,并且使用哈希。
  • { timestamp: true }:对应本地开发缓存很用帮助。
  • { timestamp: true, hash: true }:对于以上提到的两者都很有帮助。首先比较时间戳,这代价很低,因为 webpack 不需要读取文件来计算它们的哈希值。仅当时间戳相同时才会比较内容哈希,这对初始构建的性能影响很小。

module

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

构建模块的快照。

  • hash:比较内容哈希以判断无效。(比 timestamp 更昂贵,但更改的频率较低)。
  • timestamp:比较时间戳以确定无效。

resolve

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

解析请求的快照。

  • hash:比较内容哈希以判断无效。(比 timestamp 更昂贵,但更改的频率较低)。
  • timestamp:比较时间戳以确定无效。

resolveBuildDependencies

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

使用持久缓存时用于解析构建依赖项的快照。

  • hash:比较内容哈希以判断无效。(比 timestamp 更昂贵,但更改的频率较低)。
  • timestamp:比较时间戳以确定无效。