boolean: false
experiments
配置是在 webpack 5 中推出,目的是为了给用户赋能去开启并试用一些实验的特性。
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 when experiments.futureDefaults
is set to true
.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 when await
is used on the top-level. And it is enabled by default when experiments.futureDefaults
is set to true
.webpack.config.js
module.exports = {
//...
experiments: {
asyncWebAssembly: true,
buildHttp: true,
layers: true,
lazyCompilation: true,
outputModule: true,
syncWebAssembly: true,
topLevelAwait: true,
},
};
为许多 webpack 4 api 启用后向兼容层,并发出弃用警告。
boolean
module.exports = {
//...
experiments: {
backCompat: true,
},
};
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);
允许的 URI 列表。
类型:(string|RegExp|(uri: string) => boolean)[]
示例
// webpack.config.js
module.exports = {
//...
experiments: {
buildHttp: {
allowedUris: [
'http://localhost:9990/',
'https://raw.githubusercontent.com/',
],
},
},
};
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.
Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error.
boolean
Define the location to store the lockfile.
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
.
指定用来获取远程资源的代理服务器。
string
默认情况下,webpack 会让代理服务器使用 http_proxy
(不区分大小写) 环境变量值获取远程资源。然而,你也可以通过 proxy
配置项指定。
检测远程资源的更改并自动升级。
boolean
启用原生 CSS 支持。请注意该实验特性仍处于开发状态并且将会在 webpack v6 中默认启用,你可以在 GitHub 中跟踪进度。
boolean
Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.
boolean
Defaults to the value of futureDefaults
.
使用下一个 webpack 主版本的默认值,并在任何有问题的地方显示警告。
webpack.config.js
module.exports = {
//...
experiments: {
futureDefaults: true,
},
};
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()),
},
},
};
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,
},
};
Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。