阅读(4877) 赞(0)

Webpack 其它选项

2023-05-16 18:03:55 更新

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

amd

object boolean: false

设置 require.amd 或 define.amd 的值。设置 amd 为 false 会禁用 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 退出其打包过程。

dependencies

[string]

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

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

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

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

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 来选择性展示警告，其参数分别为 WebpackError 和 Compilation，且返回值为 boolean。还可以包含以下属性的 object：

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

ignoreWarnings 必须是上述任意或所有类型组成的 array。

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

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(),
  },
};

debug

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

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

webpack.config.js

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

level

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

可能的取值：

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

webpack.config.js

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

stream

5.31.0+

NodeJS.WritableStream = process.stderr

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

webpack.config.js

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

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

name

string

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

webpack.config.js

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

parallelism

number = 100

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

profile

boolean

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

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

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)行为。

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

buildDependencies

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

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

hash：比较内容哈希以确定无效（比 timestamp 更昂贵，但更改的频率较低）。
timestamp：比较 timestamps 以确定无效。

hash 与 timestamp 都是可选配置。

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

immutablePaths

(RegExp | string)[]

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

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

managedPaths

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

managedPaths

(RegExp | string)[]

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

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

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：比较时间戳以确定无效。

Webpack 其它选项

amd

bail

dependencies

ignoreWarnings

infrastructureLogging

appendOnly

colors

console

debug

level

stream

loader

name

parallelism

profile

recordsInputPath

recordsOutputPath

recordsPath

snapshot

buildDependencies

immutablePaths

managedPaths

managedPaths

module

resolve

resolveBuildDependencies

Further Reading

推荐文章

推荐教程

技术文章