Experiments
experiments
boolean: false
experiments
option was introduced in webpack 5 to empower users with the ability to activate and try out experimental features.
Available options:
-
asyncWebAssembly
: Support the new WebAssembly according to the updated specification, it makes a WebAssembly module an async module. And it is enabled by default whenexperiments.futureDefaults
is set totrue
. backCompat
buildHttp
cacheUnaffected
css
futureDefaults
-
layers
: Enable module and chunk layers. lazyCompilation
outputModule
-
syncWebAssembly
: Support the old WebAssembly like in webpack 4. -
topLevelAwait
: Support the Top Level Await Stage 3 proposal, it makes the module an async module whenawait
is used on the top-level. And it is enabled by default whenexperiments.futureDefaults
is set totrue
.
webpack.config.js
module.exports = { //... experiments: { asyncWebAssembly: true, buildHttp: true, layers: true, lazyCompilation: true, outputModule: true, syncWebAssembly: true, topLevelAwait: true, }, };
experiments.backCompat
Enable backward-compat layer with deprecation warnings for many webpack 4 APIs.
- Type:
boolean
module.exports = { //... experiments: { backCompat: true, }, };
experiments.buildHttp
When enabled, webpack can build remote resources that begin with the http(s):
protocol.
-
Type:
-
(string | RegExp | ((uri: string) => boolean))[]
A shortcut for
experiments.buildHttp.allowedUris
. -
HttpUriOptions
{ allowedUris: (string|RegExp|(uri: string) => boolean)[], cacheLocation?: false | string, frozen?: boolean, lockfileLocation?: string, upgrade?: boolean }
-
Available: 5.49.0+
-
Example
// webpack.config.js module.exports = { //... experiments: { buildHttp: true, }, };
// src/index.js import pMap1 from 'https://cdn.skypack.dev/p-map'; // with `buildHttp` enabled, webpack will build pMap1 just like a regular local module console.log(pMap1);
experiments.buildHttp.allowedUris
A list of allowed URIs.
Type:
(string|RegExp|(uri: string) => boolean)[]
-
Example
// webpack.config.js module.exports = { //... experiments: { buildHttp: { allowedUris: [ 'http://localhost:9990/', 'https://raw.githubusercontent.com/', ], }, }, };
experiments.buildHttp.cacheLocation
Define the location for caching remote resources.
- Type
string
false
- Example
// webpack.config.js module.exports = { //... experiments: { buildHttp: { cacheLocation: false, }, }, };
By default webpack would use <compiler-name.>webpack.lock.data/
for caching, but you can disable it by setting its value to false
.
Note that you should commit files under experiments.buildHttp.cacheLocation
into a version control system as no network requests will be made during the production
build.
experiments.buildHttp.frozen
Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error.
- Type:
boolean
experiments.buildHttp.lockfileLocation
Define the location to store the lockfile.
- Type:
string
By default webpack would generate a <compiler-name.>webpack.lock
file>. Make sure to commit it into a version control system. During the production
build, webpack will build those modules beginning with http(s):
protocol from the lockfile and caches under experiments.buildHttp.cacheLocation
.
experiments.buildHttp.proxy
Specify the proxy server to use for fetching remote resources.
- Type:
string
By default, Webpack would imply the proxy server to use for fetching remote resources from the http_proxy
(case insensitive) environment variable. However, you can also specify one through the proxy
option.
experiments.buildHttp.upgrade
Detect changes to remote resources and upgrade them automatically.
- Type:
boolean
experiments.css
Enable native CSS support. Note that it's an experimental feature still under development and will be enabled by default in webpack v6, however you can track the progress on GitHub.
- Type:
boolean
experiments.cacheUnaffected
Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.
- Type:
boolean
Defaults to the value of futureDefaults
.
experiments.futureDefaults
Use defaults of the next major webpack and show warnings in any problematic places.
webpack.config.js
module.exports = { //... experiments: { futureDefaults: true, }, };
experiments.lazyCompilation
Compile entrypoints and dynamic import
s only when they are in use. It can be used for either Web or Node.js.
-
Type
boolean
-
object
{ // define a custom backend backend?: (( compiler: Compiler, callback: (err?: Error, api?: BackendApi) => void ) => void) | ((compiler: Compiler) => Promise<BackendApi>) | { /** * A custom client. */ client?: string; /** * Specify where to listen to from the server. */ listen?: number | ListenOptions | ((server: typeof Server) => void); /** * Specify the protocol the client should use to connect to the server. */ protocol?: "http" | "https"; /** * Specify how to create the server handling the EventSource requests. */ server?: ServerOptionsImport | ServerOptionsHttps | (() => typeof Server); }, entries?: boolean, imports?: boolean, test?: string | RegExp | ((module: Module) => boolean) }
-
backend
: Customize the backend. -
entries
: Enable lazy compilation for entries. -
imports
5.20.0+: Enable lazy compilation for dynamic imports. -
test
5.20.0+: Specify which imported modules should be lazily compiled.
-
Available: 5.17.0+
-
Example 1:
module.exports = { // … experiments: { lazyCompilation: true, }, };
-
Example 2:
module.exports = { // … experiments: { lazyCompilation: { // disable lazy compilation for dynamic imports imports: false, // disable lazy compilation for entries entries: false, // do not lazily compile moduleB test: (module) => !/moduleB/.test(module.nameForCondition()), }, }, };
experiments.outputModule
boolean
Once enabled, webpack will output ECMAScript module syntax whenever possible. For instance, import()
to load chunks, ESM exports to expose chunk data, among others.
module.exports = { experiments: { outputModule: true, }, };
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/experiments