实验特性

experiments

boolean: false

experiments 选项在 webpack 5 中引入，旨在让用户能够激活和尝试实验性功能。

可用选项

asyncWebAssembly: 根据更新的规范支持新的 WebAssembly，它使 WebAssembly 模块成为异步模块。当 experiments.futureDefaults 设置为 true 时，此功能默认启用。
backCompat
buildHttp
cacheUnaffected
css
deferImport
futureDefaults
layers: 启用模块和 chunk 层。
lazyCompilation
outputModule
syncWebAssembly: 支持 webpack 4 中的旧版 WebAssembly。
topLevelAwait

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): 协议开头的远程资源。

类型

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

experiments.buildHttp.allowedUris 的快捷方式。

HttpUriOptions

{
  allowedUris: (string|RegExp|(uri: string) => boolean)[],
  cacheLocation?: false | string,
  frozen?: boolean,
  lockfileLocation?: string,
  upgrade?: boolean
}

可用版本: 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 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: [
        'https://:9990/',
        'https://raw.githubusercontent.com/',
      ],
    },
  },
};

experiments.buildHttp.cacheLocation

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

类型
- string
- false

示例

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

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

请注意，您应该将 experiments.buildHttp.cacheLocation 下的文件提交到版本控制系统，因为在 production 构建期间不会发出网络请求。

experiments.buildHttp.frozen

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

类型：boolean

experiments.buildHttp.lockfileLocation

定义存储锁文件的位置。

类型：`string`

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

experiments.buildHttp.proxy

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

类型：`string`

默认情况下，Webpack 会从 http_proxy（不区分大小写）环境变量中推断用于获取远程资源的代理服务器。但是，您也可以通过 proxy 选项指定一个。

experiments.buildHttp.upgrade

检测远程资源的变化并自动升级它们。

类型：boolean

experiments.css

启用原生 CSS 支持。请注意，这是一个仍在开发中的实验性功能，将在 webpack v6 中默认启用，您可以在 GitHub 上跟踪其进展。

类型：boolean

实验性功能

CSS Modules 支持：webpack 会为每个 CSS 类生成一个唯一的名称。CSS Modules 请使用 .module.css 扩展名。
5.87.0+ package.json 文件中的样式特定字段解析：webpack 会在 package.json 文件中查找 style 字段，如果存在，则将其用于 CSS 文件内部的导入。

例如，如果您在 CSS 文件中添加 @import 'bootstrap';，webpack 会在 node_modules 中查找 bootstrap，并使用其 package.json 中的 style 字段。如果未找到 style 字段，webpack 将转而使用 main 字段以保持向后兼容性。
CSS 文件的内容哈希：webpack 会为 CSS 文件生成内容哈希，并在文件名中使用它。这对于长期缓存很有用。
CSS 提取：webpack 会将 CSS 提取到单独的文件中。此功能取代了 mini-css-extract-plugin 和 css-loader 的需求，因为它提供了原生支持。
CSS 导入：webpack 会将 CSS 导入内联到生成的 CSS 文件中。
热模块重载 (HMR)：webpack 支持 CSS 文件的 HMR。这意味着对 CSS 文件所做的更改将无需完全重新加载页面即可反映在浏览器中。

experiments.cacheUnaffected

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

类型：boolean

默认为 futureDefaults 的值。

experiments.deferImport

启用对 tc39 提案 import defer 提案的支持。这允许将模块的评估延迟到首次使用时。当由于 import() 的异步性质而无法使用 import() 时，这对于同步延迟代码执行很有用。

类型：boolean

此功能要求运行时环境支持 Proxy (ES6)。

启用以下语法

import defer * as module from 'module-name';
// or
import * as module2 from /* webpackDefer: true */ 'module-name2';

export function f() {
  // module-name is evaluated synchronously, then call doSomething() on it.
  module.doSomething();
}

魔法注释的限制 (`/* webpackDefer: true */`)

建议将魔法注释放在 from 关键字之后。其他位置可能有效，但尚未经过测试。

将魔法注释放在 import 关键字之后与文件系统缓存不兼容。

import /* webpackDefer: true */ * as ns from '...'; // known broken
import * as ns from /* webpackDefer: true */ '...'; // recommended

您应该确保您的加载器不会删除魔法注释。

TypeScript, Babel, SWC 和 Flow.js 可以配置为保留魔法注释。

Esbuild 与此功能不兼容（参见 evanw/esbuild#1439 和 evanw/esbuild#309），但未来可能会支持此功能。

未实现

此提案的异步形式尚未实现。

import.defer('module-name'); // not implemented
import(/* webpackDefer: true */ 'module-name'); // not implemented

experiments.futureDefaults

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

webpack.config.js

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

experiments.lazyCompilation

仅在使用时编译入口点和动态 import。它可用于 Web 或 Node.js。

类型

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: 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 | (() => Server);
    },
  entries?: boolean,
  imports?: boolean,
  test?: string | RegExp | ((module: Module) => boolean)
}

backend: 自定义后端。
entries: 为入口启用惰性编译。
imports 5.20.0+: 为动态导入启用惰性编译。
test 5.20.0+: 指定哪些导入的模块应该被惰性编译。

可用版本：5.17.0+

示例 1

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

示例 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() 加载 chunk，使用 ESM 导出暴露 chunk 数据等等。

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

experiments.topLevelAwait

boolean = true

当顶层使用 await 时，topLevelAwait 选项会将模块转换为异步模块。从 webpack 5.83.0 版本开始，此功能默认启用。但是，在此之前的版本中，您可以通过将 experiments.topLevelAwait 设置为 true 来启用它。

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

编辑此页·打印此页

« 上一页

统计

基础设施日志