javascript - Webpack 加载器 : Are options considered when caching?

Question

我正在编写一个应该可缓存的 Webpack 加载器。 documentation for this.cacheable说:

A cacheable loader must have a deterministic result, when inputs and dependencies haven't changed.

现在我想知道:从这个意义上讲，加载器的选项算作“输入”吗？

假设我有一个 Webpack 构建，它在模块上使用带有选项 { foo: 1 } 的加载器。在下一次编译中，它在同一模块上使用相同的加载器，但带有选项 { foo: 2 }。第一次编译的输出会被重新使用，还是 Webpack(正确地)意识到加载器的选项已更改，从而重新加载模块？

假设 Webpack 确实比较 options 对象，它们是如何比较的？引用？使用深度比较？比较逻辑将决定我可以安全地使用哪些类型的数据作为加载器选项。

Answer 1

简短版本:

Webpack 通过其 request 字符串来标识模块。该字符串包含文件路径以及所有涉及的加载程序的路径和选项。这实际上意味着更改一个加载器上的选项将导致不同的请求字符串，因此之前的加载结果将不会被重新使用。

长版:

请求字符串以“!”分隔，由 this code 创建.

考虑这个请求字符串:

"/Users/wolf/dev/webpack-test/test-loader.js!/Users/wolf/dev/webpack-test/patch-loader.js??ref--0-0!/Users/wolf/dev/webpack-test/src/foo.js"

这意味着(从右到左)文件 /Users/wolf/dev/webpack-test/src/foo.js 将首先使用加载器 /Users/加载Wolf/dev/webpack-test/patch-loader.js 带有选项 ref--0-0，然后是加载器 /Users/wolf/dev/webpack-test/test-loader.js 没有任何选项。

现在相关的问题是 Webpack 在创建请求字符串时如何序列化加载器的选项。答案可参见 in this code :

让loaderData成为这种形式的对象:

{
  loader: string, // Path to loader
  options: string | object | null | undefined,
  ident: string | null | undefined
}

• 如果 loaderData.options 是字符串，则按原样使用。
• 否则，如果 loaderData.ident 为真，则使用该值。
• 否则，loaderData.options 将使用 JSON.stringify 进行字符串化。

看来当加载器是 specified statically 时，Webpack 知道他们的选项不会改变。因此，RuleSet.normalizeRule() 为它们分配固定的 ident 属性。这就是上面的 ref--0-0 示例中发生的情况。

这里的一个关键见解是加载器选项应该是相当简单的对象，以便对它们调用 JSON.stringify 不会丢失任何信息。否则，Webpack 可能会无意中重复使用使用不同加载器选项的缓存结果。或者，您可以显式地将 loaderData.ident 设置为唯一标识选项的字符串(例如哈希码)。