这里是 webpack 支持的其它选项。
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 支持将忽略定义的名称。
boolean = false
在第一个错误出现时抛出失败结果,而不是容忍它。默认情况下,当使用 HMR 时,webpack 会将在终端以及浏览器控制台中,以红色文字记录这些错误,但仍然继续进行打包。要启用它:
webpack.config.js
module.exports = {
//...
bail: true,
};
这将迫使 webpack 退出其打包过程。
[string]
一个 name
列表,定义它所依赖的所有兄弟(sibling)配置。需要首先编译依赖的配置。
在 watch 模式下,当出现以下情况时,依赖项将使编译器失效:
请记住,在完成依赖项编译之前,不会编译此配置。
webpack.config.js
module.exports = [
{
name: 'client',
target: 'web',
// …
},
{
name: 'server',
target: 'node',
dependencies: ['client'],
},
];
[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,
],
};
用于基础设施水平的日志选项。
object = {}
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');
},
],
};
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
为基础设施日志提供自定义方案。
webpack.config.js
module.exports = {
//...
infrastructureLogging: {
console: yourCustomConsole(),
},
};
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')],
},
};
string = 'info' : 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'
开启基础设施日志输出。与 stats.logging
选项类似但仅仅是对于基础设施而言。默认值为 'info'
。
可能的取值:
'none'
- 禁用日志'error'
- 仅仅显示错误'warn'
- 仅仅显示错误与告警'info'
- 显示错误、告警与信息'log'
- 显示错误、告警,信息,日志信息,组别,清楚。 收缩的组别会在收缩的状态中被显示。'verbose'
- 输出所有日志除了调试与追踪。收缩的组别会在扩展的状态中被显示。webpack.config.js
module.exports = {
//...
infrastructureLogging: {
level: 'info',
},
};
NodeJS.WritableStream = process.stderr
用于日志输出的流。默认为 process.stderr
。此选项仅在未提供自定义 console
的情况下使用。
webpack.config.js
module.exports = {
//...
infrastructureLogging: {
stream: process.stderr,
},
};
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;
};
string
配置的名称。当加载不同的配置时会被使用。
webpack.config.js
module.exports = {
//...
name: 'admin-app',
};
number = 100
限制并行处理的模块数量。可以用于调优性能或获取更可靠的性能分析结果。
boolean
捕获一个应用程序"配置文件",包括统计和提示,然后可以使用 Analyze 分析工具进行详细分析。
string
指定读取最后一条记录的文件的名称。这可以用来重命名一个记录文件,可以查看下面的实例:
string
指定记录要写入的位置。以下示例描述了如何用这个选项和 recordsInptuPaht
来重命名一个记录文件:
webpack.config.js
const path = require('path');
module.exports = {
//...
recordsInputPath: path.join(__dirname, 'records.json'),
recordsOutputPath: path.join(__dirname, 'newRecords.json'),
};
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)行为。
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,
},
},
};
object = { hash boolean = true, timestamp boolean = true }
使用持久化缓存时的依赖构建关系快照。
hash
:比较内容哈希以确定无效(比 timestamp
更昂贵,但更改的频率较低)。timestamp
:比较 timestamps 以确定无效。hash
与 timestamp
都是可选配置。
{ hash: true }
:对 CI 缓存很有帮助,使用新的 checkout,不需要保存时间戳,并且使用哈希。{ timestamp: true }
:对应本地开发缓存很用帮助。{ timestamp: true, hash: true }
:对于以上提到的两者都很有帮助。首先比较时间戳,这代价很低,因为 webpack 不需要读取文件来计算它们的哈希值。仅当时间戳相同时才会比较内容哈希,这对初始构建的性能影响很小。(RegExp | string)[]
由包管理器管理的路径数组,在其路径中包含一个版本或哈希,以便所有文件都是不可变的(immutable)。
如果使用正则表达式,请确保将路径包裹在捕获组中。
如果使用正则表达式,请确保将路径包裹在捕获组中。
(RegExp | string)[]
由包管理器管理的路径数组,可以信任它不会被修改。
如果使用正则表达式,请确保将路径包裹在捕获组中。
object = {hash boolean = true, timestamp boolean = true}
构建模块的快照。
hash
:比较内容哈希以判断无效。(比 timestamp
更昂贵,但更改的频率较低)。timestamp
:比较时间戳以确定无效。object = {hash boolean = true, timestamp boolean = true}
解析请求的快照。
hash
:比较内容哈希以判断无效。(比 timestamp
更昂贵,但更改的频率较低)。timestamp
:比较时间戳以确定无效。object = {hash boolean = true, timestamp boolean = true}
使用持久缓存时用于解析构建依赖项的快照。
hash
:比较内容哈希以判断无效。(比 timestamp
更昂贵,但更改的频率较低)。timestamp
:比较时间戳以确定无效。Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。