实验

experiments

布尔值：false

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

可用选项

asyncWebAssembly：根据更新后的规范支持新的 WebAssembly，它使 WebAssembly 模块成为异步模块。当 experiments.futureDefaults 设置为 true 时，它默认启用。
backCompat
buildHttp
cacheUnaffected
css
futureDefaults
layers：启用模块和块层。
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://127.0.0.1:9990/',
        'https://raw.githubusercontent.com/',
      ],
    },
  },
};

experiments.buildHttp.cacheLocation

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

类型
- 字符串
- 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 将从锁文件构建以 http(s): 协议开头的那些模块，并缓存到 experiments.buildHttp.cacheLocation 下。

experiments.buildHttp.proxy

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

类型：string

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

experiments.buildHttp.upgrade

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

类型：boolean

experiments.css

启用原生 CSS 支持。请注意，此项实验性功能仍在开发中，且将在 webpack v6 中默认启用，但你可以在 GitHub 上追踪其进度。

类型：boolean

实验性功能

CSS 模块支持：webpack 将为每个 CSS 类生成一个唯一名称。对 CSS 模块使用 .module.css 扩展名。
5.87.0+package.json 文件中的特定样式字段解析：webpack 将在 package.json 文件中查找 style 字段，并在 CSS 文件中的导入中存在该字段时使用它。
例如，如果你将 @import 'bootstrap'; 添加到你的 CSS 文件，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.futureDefaults

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

webpack.config.js

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

experiments.lazyCompilation

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

类型

布尔值

对象

{
// 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

布尔值

启用后，webpack 将尽可能输出 ECMAScript 模块语法。例如，import() 用于加载块，ESM 导出用于公开块数据，等等。

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

experiments.topLevelAwait

布尔值 = true

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

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

编辑此页面·打印此页面

« 上一页

统计信息

其他选项