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
};
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'
}
};
While setting cache.type
to filesystem
opens up more options for configuration.
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.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.
module.exports = {
cache: {
buildDependencies: {
// This makes all dependencies of this file - build dependencies
config: [__filename]
// By default webpack and loaders are build dependencies
}
}
};
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.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.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.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 itemscache.store
option is only available when cache.type
is set to filesystem
.
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
store: 'pack'
}
};
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'
}
};
cache.idleTimeout
number = 10000
Time in milliseconds. cache.idleTimeout
denotes the time period after which the cache storing should happen.
webpack.config.js
module.exports = {
//..
cache: {
idleTimeout: 10000
}
};
cache.idleTimeoutForInitialStore
number = 0
Time in milliseconds. cache.idleTimeoutForInitialStore
is the time period after which the initial cache storing should happen.
webpack.config.js
module.exports = {
//..
cache: {
idleTimeoutForInitialStore: 0
}
};
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.
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, simply 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'
};
Options for infrastructure level logging.
object = {}
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'
}
};
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')
]
}
};
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.