Experiments | webpack

experiments option was introduced in webpack 5 to empower users with the ability to activate and try out experimental features.
Because experimental features have relaxed semantic versioning and might contain breaking changes, make sure to fix webpack's version to minor e.g. webpack: ~5.4.3 instead of webpack: ^5.4.3 or use a lockfile when using experiments.
Enable backward-compat layer with deprecation warnings for many webpack 4 APIs.
When enabled, webpack can build remote resources that begin with the http(s): protocol.
(string | RegExp | ((uri: string) => boolean))[]
A shortcut for experiments.buildHttp.allowedUris.
A list of allowed URIs.
Type: (string|RegExp|(uri: string) => boolean)[]
Define the location for caching remote resources.
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.
Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error.
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.
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.
Detect changes to remote resources and upgrade them automatically.
Webpack's built-in CSS support — stable, and on by default since webpack 5.109.0, so .css files need no configuration and no loader. It replaces the deprecated css-loader, style-loader and mini-css-extract-plugin; see the Native CSS guide. The option keeps its experiments name until webpack v6 makes it unconditional.
Since webpack 5.109.0, the option defaults to 'auto': the built-in CSS support is enabled unless a module.rules entry with a loader (or explicit module type) already matches .css or .module.css files, so an existing loader-based CSS setup keeps working unchanged. Set it to true to force the native support, or false to disable it entirely. experiments.futureDefaults resolves it to true.
CSS Modules support: webpack will generate a unique name for each CSS class. Use the .module.css extension for CSS Modules.
Webpack natively supports the CSS Modules composes property, allowing you to compose classes from the same file, other CSS modules, or global classes:
5.87.0+ Style-specific fields resolution in package.json files: webpack will look for style field in package.json files and use that if it exists for imports inside CSS files.
For example, if you add @import 'bootstrap'; to your CSS file, webpack will look for bootstrap in node_modules and use the style field in package.json from there. If style field is not found, webpack will use the main field instead to preserve backward compatibility.
Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching.
CSS extraction: webpack will extract CSS into a separate file, so no loader or plugin is needed for it — see Native CSS.
CSS imports: webpack will inline CSS imports into the generated CSS file.
Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload.
5.107.0+ Scope hoisting (module concatenation) for CSS Modules. When optimization.concatenateModules is enabled, CSS Modules whose exportType is text, css-style-sheet, style, or link are concatenated into a single module instance instead of being kept as separate runtime instances. This reduces overhead and produces smaller output for CSS-heavy bundles.
5.107.0+ @value identifiers can be used as the path argument to @import and inside url() references, so shared paths and assets can be defined once and reused across stylesheets. Both quoted ("./x", './x') and bare (./x) forms are accepted and resolved through webpack's normal asset pipeline.
Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.
Defaults to the value of futureDefaults.
Enable support of the tc39 proposal the import defer proposal. This allows deferring the evaluation of a module until its first use. This is useful to synchronously defer code execution when it's not possible to use import() due to its asynchronous nature.
This feature requires the runtime environment to have Proxy (ES6) support.
Enables the following syntaxes:
It's suggested to put the magic comment after the from keyword. Other positions may work, but have not been tested.
Putting the magic comment after the import keyword is incompatible with the filesystem cache.
Enable support for the tc39 proposal Source Phase Imports.
This proposal introduces a way to import a module at the source phase instead of immediately evaluating it. In webpack, this experimental support is currently implemented for WebAssembly modules: you obtain a compiled WebAssembly.Module first and instantiate it later with your own imports. Support for JavaScript source imports is planned for a future release.
Enable it alongside asyncWebAssembly:
Then use either the static or dynamic source-phase syntax with a .wasm import: