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.
• buildHttp
• executeModule
• 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 when await is used on the top-level.

webpack.config.js

module.exports = {
  //...
  experiments: {
    asyncWebAssembly: true,
    buildHttp: true,
    executeModule: true,
    layers: true,
    lazyCompilation: true,
    outputModule: true,
    syncWebAssembly: true,
    topLevelAwait: true,
  },
};

experiments.buildHttp

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

• Type:

  One of the following:

  • boolean
  • HttpUriOptions

    {
      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.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.upgrade

Detect changes to remote resources and upgrade them automatically.

• Type: boolean

experiments.executeModule

Enable execution of modules from the module graph for plugins and loaders at build time to generate code or other assets.

• Type: boolean

• Available: 5.32.0+

• Example:

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

experiments.lazyCompilation

Compile entrypoints and dynamic imports 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: webpack.Compiler,
        client: string,
        callback: (err?: Error, api?: any) => void
      ) => void)
      | ((
          compiler: webpack.Compiler,
          client: string
        ) => Promise<any>)
      client?: string,
      entries?: boolean,
      imports?: boolean,
      test?: RegExp | string | ((module: import("../lib/Module")) => boolean)
    }

    • client: Path to a custom client, defaults to webpack/hot/lazy-compilation-{node|web}.js.
    • backend: Customize the backend, defaults to webpack/lib/hmr/lazyCompilationBackend.
    • 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 ouput ECMAScript module syntax whenever possible. For instance, import() to load chunks, ESM exports to expose chunk data, among others.

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

Contributors

EugeneHlushko wizardofhogwarts chenxsan anshumanv