Webpack 實驗特性(Experiments)

experiments

?boolean: false?

experiments 配置是在 webpack 5 中推出，目的是為了給用戶賦能去開啟并試用一些實驗的特性。

Available options:

• ?asyncWebAssembly?：根據(jù)更新的規(guī)范支持新的 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 啟用后向兼容層，并發(fā)出棄用警告。

• 類型：?boolean?

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

experiments.buildHttp

啟用后，webpack 可以構建以 http(s): 協(xié)議開頭的遠程資源。

• 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? 來禁用緩存。

請注意，在生產構建過程中，由于不會進行網(wǎng)絡請求，您應該將 ?experiments.buildHttp.cacheLocation? 目錄下的文件提交到版本控制系統(tǒng)中。

experiments.buildHttp.frozen

凍結遠程資源和鎖定文件。對鎖定文件或資源內容的任何修改都將導致錯誤。

• 類型：?boolean?

experiments.buildHttp.lockfileLocation

定義存儲鎖定文件的位置。

• 類型：?string?

默認情況下，Webpack會生成一個名為?<compiler-name>.webpack.lock?的鎖定文件。確保將其提交到版本控制系統(tǒng)中。在生產構建期間，Webpack將從鎖定文件中構建以http(s)協(xié)議開頭的模塊，并將其緩存到?experiments.buildHttp.cacheLocation?下。

experiments.buildHttp.proxy

指定用來獲取遠程資源的代理服務器。

• 類型：?string?

默認情況下，webpack 會讓代理服務器使用 http_proxy（不區(qū)分大小寫） 環(huán)境變量值獲取遠程資源。然而，你也可以通過 proxy 配置項指定。

experiments.buildHttp.upgrade

檢測遠程資源的更改并自動升級。

• 類型：?boolean?

experiments.css

啟用原生 CSS 支持。請注意該實驗特性仍處于開發(fā)狀態(tài)并且將會在 webpack v6 中默認啟用，你可以在 GitHub 中跟蹤進度。

• 類型：?boolean?

experiments.cacheUnaffected

啟用對未更改的模塊及僅引用未更改模塊的額外內存緩存。

• 類型：?boolean?

默認值為?futureDefaults?的值。

experiments.futureDefaults

使用下一個 webpack 主版本的默認值，并在任何有問題的地方顯示警告。

webpack.config.js

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

experiments.lazyCompilation

僅在使用時編譯入口點和動態(tài)導入?？捎糜?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+: 為動態(tài)導入啟用延遲編譯。

       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 導出暴露代碼塊數(shù)據(jù)等。

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