Other Options

These are the remaining configuration options supported by webpack.

amd

object boolean: false

Set the value of require.amd or define.amd. Setting amd to false will disable webpack's AMD support.

webpack.config.js

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

Certain popular modules written for AMD, most notably jQuery versions 1.7.0 to 1.9.1, will only register as an AMD module if the loader indicates it has taken special allowances for multiple versions being included on a page.

The allowances were the ability to restrict registrations to a specific version or to support different sandboxes with different defined modules.

This option allows you to set the key your module looks for to a truthy value. As it happens, the AMD support in webpack ignores the defined name anyways.

bail

boolean = false

Fail out on the first error instead of tolerating it. By default webpack will log these errors in red in the terminal, as well as the browser console when using HMR, but continue bundling. To enable it:

webpack.config.js

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

This will force webpack to exit its bundling process.

cache

boolean object

Cache the generated webpack modules and chunks to improve build speed. cache is set to type: 'memory' in development mode and disabled in production mode. cache: true is an alias to cache: { type: 'memory' }. To disable caching pass false:

webpack.config.js

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

While setting cache.type to 'filesystem' opens up more options for configuration.

cache.allowCollectingMemory

Collect unused memory allocated during deserialization, only available when cache.type is set to 'filesystem'. This requires copying data into smaller buffers and has a performance cost.

• 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 is an object of arrays of additional code dependencies for the build. webpack will use a hash of each of these items and all dependencies to invalidate the filesystem cache.

Defaults to webpack/lib to get all dependencies of webpack.

webpack.config.js

module.exports = {
  cache: {
    buildDependencies: {
      // This makes all dependencies of this file - build dependencies
      config: [__filename],
      // By default webpack and loaders are build dependencies
    },
  },
};

cache.cacheDirectory

string

Base directory for the cache. Defaults to node_modules/.cache/webpack.

cache.cacheDirectory option is only available when cache.type is set to 'filesystem'.

webpack.config.js

const path = require('path');

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

cache.cacheLocation

string

Locations for the cache. Defaults to 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

Algorithm used the hash generation. See Node.js crypto for more details. Defaults to md4.

cache.hashAlgorithm option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.idleTimeout

number = 60000

Time in milliseconds. cache.idleTimeout denotes the time period after which the cache storing should happen.

cache.idleTimeout option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.idleTimeoutForInitialStore

number = 0

Time in milliseconds. cache.idleTimeoutForInitialStore is the time period after which the initial cache storing should happen.

cache.idleTimeoutForInitialStore option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.managedPaths

[string] = ['./node_modules']

cache.managedPaths is an array of package-manager only managed paths. webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot (for both memory and filesystem cache).

cache.maxAge

number = 5184000000

The amount of time in milliseconds that unused cache entries are allowed to stay in the filesystem cache; defaults to one month.

cache.maxAge option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.maxGenerations

number

Define the lifespan of unused cache entries in the memory cache.

• cache.maxGenerations: 1: Cache entries are removed after being unused for a single compilation.

• cache.maxGenerations: Infinity: Cache entries are kept forever.

cache.maxGenerations option is only available when cache.type is set to 'memory'.

webpack.config.js

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

cache.maxMemoryGenerations

number

Define the lifespan of unused cache entries in the memory cache.

• cache.maxMemoryGenerations: 0: Persistent cache will not use an additional memory cache. It will only cache items in memory until they are serialized to disk. Once serialized the next read will deserialize them from the disk again. This mode will minimize memory usage but introduce a performance cost.

• cache.maxMemoryGenerations: 1: This will purge items from the memory cache once they are serialized and unused for at least one compilation. When they are used again they will be deserialized from the disk. This mode will minimize memory usage while still keeping active items in the memory cache.

• cache.maxMemoryGenerations: small numbers > 0 will have a performance cost for the GC operation. It gets lower as the number increases.

• cache.maxMemoryGenerations: defaults to 10 in development mode and to Infinity in production mode.

cache.maxMemoryGenerations option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.name

string

Name for the cache. Different names will lead to different coexisting caches. Defaults to ${config.name}-${config.mode}. Using cache.name makes sense when you have multiple configurations which should have independent caches.

cache.name option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.profile

boolean = false

Track and log detailed timing information for individual cache items of type 'filesystem'.

webpack.config.js

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

cache.store

string = 'pack': 'pack'

cache.store tells webpack when to store data on the file system.

• 'pack': Store data when compiler is idle in a single file for all cached items

cache.store option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

cache.type

string: 'memory' | 'filesystem'

Sets the cache type to either in memory or on the file system. The memory option is straightforward, it tells webpack to store cache in memory and doesn't allow additional configuration:

webpack.config.js

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

cache.version

string = ''

Version of the cache data. Different versions won't allow to reuse the cache and override existing content. Update the version when configuration changed in a way which doesn't allow to reuse cache. This will invalidate the cache.

cache.version option is only available when cache.type is set to 'filesystem'.

webpack.config.js

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

dependencies

[string]

A list of name defining all sibling configurations it depends on. Dependent configurations need to be compiled first.

In watch mode dependencies will invalidate the compiler when:

1. the dependency has changed
2. a dependency is currently compiling or invalid

Remember that current configuration will not compile until its dependencies are done.

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}

Tells webpack to ignore specific warnings. This can be done with a RegExp, a custom function to select warnings based on the raw warning instance which is getting WebpackError and Compilation as arguments and returns a boolean, an object with the following properties:

• file : A RegExp to select the origin file for the warning.
• message : A RegExp to select the warning message.
• module : A RegExp to select the origin module for the warning.

ignoreWarnings can be an array of any of the above.

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

loader

object

Expose custom values into the loader context.

For example, you can define a new variable in the loader context:

webpack.config.js

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

Then use this.answer to get its value in the loader:

custom-loader.js

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

parallelism

number = 100

Limit the number of parallel processed modules. Can be used to fine tune performance or to get more reliable profiling results.

profile

boolean

Capture a "profile" of the application, including statistics and hints, which can then be dissected using the Analyze tool. It will also log out a summary of module timings.

recordsPath

string

Use this option to generate a JSON file containing webpack "records" – pieces of data used to store module identifiers across multiple builds. You can use this file to track how modules change between builds. To generate one, specify a location:

webpack.config.js

const path = require('path');

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

Records are particularly useful if you have a complex setup that leverages Code Splitting. The data can be used to ensure the split bundles are achieving the caching behavior you need.

recordsInputPath

string

Specify the file from which to read the last set of records. This can be used to rename a records file. See the example below.

recordsOutputPath

string

Specify where the records should be written. The following example shows how you might use this option in combination with recordsInputPath to rename a records file:

webpack.config.js

const path = require('path');

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

name

string

Name of the configuration. Used when loading multiple configurations.

webpack.config.js

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

infrastructureLogging

Options for infrastructure level logging.

object = {}

appendOnly

boolean

Append lines to the output instead of updating existing output, useful for status messages. This option is used only when no custom console is provided.

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

boolean

Enable colorful output for infrastructure level logging. This option is used only when no custom console is provided.

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

Console

Customize the console used for infrastructure level logging.

webpack.config.js

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

level

string

Enable infrastructure logging output. Similar to stats.logging option but for infrastructure. No default value is given.

Possible values:

• 'none' - disable logging
• 'error' - errors only
• 'warn' - errors and warnings only
• 'info' - errors, warnings, and info messages
• 'log' - errors, warnings, info messages, log messages, groups, clears. Collapsed groups are displayed in a collapsed state.
• 'verbose' - log everything except debug and trace. Collapsed groups are displayed in expanded state.

webpack.config.js

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

debug

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

Enable debug information of specified loggers such as plugins or loaders. Similar to stats.loggingDebug option but for infrastructure. No default value is given.

webpack.config.js

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

stream

NodeJS.WritableStream = process.stderr

Stream used for logging output. Defaults to process.stderr. This option is used only when no custom console is provided.

webpack.config.js

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

snapshot

object

snapshot options decide how the file system snapshots are created and invalidated.

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]

An array of paths that are managed by a package manager and can be trusted to not be modified otherwise.

immutablePaths

[string]

An array of paths that are managed by a package manager and contain a version or a hash in their paths so that all files are immutable.

buildDependencies

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

Snapshots for build dependencies when using the persistent cache.

• hash: Compare content hashes to determine invalidation (more expensive than timestamp, but changes less often).
• timestamp: Compare timestamps to determine invalidation.

Both hash and timestamp are optional.

• { hash: true }: Good for CI caching with a fresh checkout which doesn't keep timestamps and uses hashes.
• { timestamp: true }: Good for local development caching.
• { timestamp: true, hash: true }: Good for both cases mentioned above. Timestamps are compared first, which is cheap because webpack doesn't need to read files to compute their hashes. Content hashes will be compared only when timestamps are the same, which leads to a small performance hit for the initial build.

module

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

Snapshots for building modules.

• hash: Compare content hashes to determine invalidation (more expensive than timestamp, but changes less often).
• timestamp: Compare timestamps to determine invalidation.

resolve

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

Snapshots for resolving of requests.

• hash: Compare content hashes to determine invalidation (more expensive than timestamp, but changes less often).
• timestamp: Compare timestamps to determine invalidation.

resolveBuildDependencies

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

Snapshots for resolving of build dependencies when using the persistent cache.

• hash: Compare content hashes to determine invalidation (more expensive than timestamp, but changes less often).
• timestamp: Compare timestamps to determine invalidation.

---

Contributors

sokra skipjack terinjokes byzyk liorgreenb vansosnin EugeneHlushko skovy rishabh3112 niravasher Neob91 chenxsan u01jmg3 jamesgeorge007 snitin315