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.
• 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: {
    executeModule: true,
    outputModule: true,
    syncWebAssembly: true,
    topLevelAwait: true,
    asyncWebAssembly: true,
    layers: true,
    lazyCompilation: true,
  },
};

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