Webpack 实验特性(Experiments)

experiments

boolean: false

experiments 配置是在 webpack 5 中推出，目的是为了给用户赋能去开启并试用一些实验的特性。

Available options:

asyncWebAssembly：根据更新的规范支持新的 WebAssembly，将 WebAssembly 模块转换为异步模块。当 experiments.futureDefaults 设置为 true 时，默认情况下启用此功能。
backCompat
buildHttp
cacheUnaffected
css
futureDefaults
layers: Enable module and chunk layers.
lazyCompilation
outputModule
syncWebAssembly: Support the old WebAssembly like in webpack 4.
topLevelAwait: 支持顶层 Await Stage 3 提案，当在顶层使用 await 时，将模块转换为异步模块。当 experiments.futureDefaults 设置为 true 时，默认情况下启用此功能。

webpack.config.js

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

experiments.backCompat

为许多 webpack 4 api 启用后向兼容层，并发出弃用警告。

类型：boolean

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

experiments.buildHttp

启用后，webpack 可以构建以 http(s): 协议开头的远程资源。

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+

示例

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

允许的 URI 列表。

类型：(string|RegExp|(uri: string) => boolean)[]

示例

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: {
      allowedUris: [
        http://localhost:9990/,
        https://raw.githubusercontent.com/,
      ],
    },
  },
};

experiments.buildHttp.cacheLocation

定义远程资源的缓存位置。

Type：string false

Example

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: {
      cacheLocation: false,
    },
  },
};

默认情况下，webpack会使用 <compiler-name.>webpack.lock.data/ 进行缓存，但您可以通过将其值设置为 false 来禁用缓存。

请注意，在生产构建过程中，由于不会进行网络请求，您应该将 experiments.buildHttp.cacheLocation 目录下的文件提交到版本控制系统中。

experiments.buildHttp.frozen

冻结远程资源和锁定文件。对锁定文件或资源内容的任何修改都将导致错误。

类型：boolean

experiments.buildHttp.lockfileLocation

定义存储锁定文件的位置。

类型：string

默认情况下，Webpack会生成一个名为<compiler-name>.webpack.lock的锁定文件。确保将其提交到版本控制系统中。在生产构建期间，Webpack将从锁定文件中构建以http(s)协议开头的模块，并将其缓存到experiments.buildHttp.cacheLocation下。

experiments.buildHttp.proxy

指定用来获取远程资源的代理服务器。

类型：string

默认情况下，webpack 会让代理服务器使用 http_proxy（不区分大小写）环境变量值获取远程资源。然而，你也可以通过 proxy 配置项指定。

experiments.buildHttp.upgrade

检测远程资源的更改并自动升级。

类型：boolean

experiments.css

启用原生 CSS 支持。请注意该实验特性仍处于开发状态并且将会在 webpack v6 中默认启用，你可以在 GitHub 中跟踪进度。

类型：boolean

experiments.cacheUnaffected

启用对未更改的模块及仅引用未更改模块的额外内存缓存。

类型：boolean

默认值为futureDefaults的值。

experiments.futureDefaults

使用下一个 webpack 主版本的默认值，并在任何有问题的地方显示警告。

webpack.config.js

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

experiments.lazyCompilation

仅在使用时编译入口点和动态导入。可用于 Web 或 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: 自定义后端。

entries: 为入口点启用延迟编译。

imports 5.20.0+: 为动态导入启用延迟编译。

test 5.20.0+: 指定应该延迟编译的导入模块。

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

启用后，webpack 将尽可能输出 ECMAScript 模块语法。例如，使用 import() 加载代码块，使用 ESM 导出暴露代码块数据等。

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

作者：冒牌SEO，如若转载，请注明出处：https://www.web176.com/webpack/22657.html