Webpack Loader缓存疑问：配置选项是否被视为输入因素？

Great question—this is a common point of confusion when building cache-aware Webpack loaders, so let’s break this down clearly:

1. Are Loader configuration options considered "input" for caching purposes? #

Absolutely. Webpack’s caching system for loaders treats loader configuration options as a critical part of the input set when determining whether a cached output can be reused.

The reason is straightforward: your loader’s behavior (and thus its output) is directly tied to these options. If your loader uses the foo option to modify how it processes the module source, changing foo from 1 to 2 will logically produce a different output. Webpack recognizes this and includes serialized configuration data in the cache key it generates for each loader-module pair.

2. Will the first build’s output be reused if the loader option changes for the same module? #

No, it won’t.

Webpack generates a unique cache key for each loader invocation, which includes:

• The source content of the module being processed
• The loader’s own source code (to invalidate cache if the loader itself is updated)
• Serialized loader configuration options
• The content of any files the loader depends on (via this.addDependency())

When you change the option from { foo: 1 } to { foo: 2 }, the serialized configuration string will differ, resulting in a completely new cache key. Webpack will detect this as a fresh input, run the loader again with the new options, and store the new output in the cache instead of reusing the old one.

A Quick Practical Note #

To ensure this caching logic works reliably, make sure your loader configuration options are JSON-serializable. Avoid using non-serializable values like functions, Symbols, or circular references—these can’t be properly stringified, which would prevent Webpack from detecting configuration changes correctly, leading to incorrect cache reuse.

内容的提问来源于stack exchange，提问作者Daniel Wolf