Experiments | webpack (original) (raw)

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:

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.

module.exports = {
  //...
  experiments: {
    backCompat: true,
  },
};

experiments.buildHttp

When enabled, webpack can build remote resources that begin with the http(s): protocol.

// 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 like a regular local module  
console.log(pMap1);

experiments.buildHttp.allowedUris

A list of allowed URIs.

// 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.

// 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.

experiments.buildHttp.lockfileLocation

Define the location to store the lockfile.

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.

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.

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.

Experimental features:

experiments.cacheUnaffected

Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.

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 imports only when they are in use. It can be used for either Web or Node.js.

module.exports = {  
  // …  
  experiments: {  
    lazyCompilation: true,  
  },  
};  
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,
  },
};

experiments.topLevelAwait

boolean = true

The topLevelAwait option transforms a module into an async module when an await is used at the top level. Starting from webpack version 5.83.0, this feature is enabled by default. However, in versions prior to that, you can enable it by setting experiments.topLevelAwait to true.

module.exports = {
  experiments: {
    topLevelAwait: true,
  },
};