實驗

experiments

布林值：false

experiments 選項在 webpack 5 中引入，使用戶能夠啟用和試用實驗性功能。

可用的選項

asyncWebAssembly：根據更新的規範支援新的 WebAssembly，它讓 WebAssembly 模組成為非同步模組。當 experiments.futureDefaults 設為 true 時，它會預設啟用。
backCompat
buildHttp
快取不受影響
css
futureDefaults
layers：啟用模組和區塊層。
lazyCompilation
outputModule
syncWebAssembly：支援舊的 WebAssembly，就像 webpack 4 中一樣。
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): 協定開始的遠端資源。

類型

(字串 | RegExp | ((uri: 字串) => 布林))[]
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 清單。

類型：(字串|RegExp|(uri: 字串) => 布林)[]

範例

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: {
      allowedUris: [
        'http://localhost: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。

類型

布林值

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：為 entries 啟用延遲編譯。
imports 5.20.0+：為動態 import 啟用延遲編譯。
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,
  },
};

編輯此頁面·列印此頁面

« 上一頁

統計資料

其他選項