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,
  },
};