実験的機能

experiments

boolean: 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: [
        'http://localhost: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.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()、チャンクデータを公開するための ESM エクスポートなどです。

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

experiments.topLevelAwait

boolean = true

topLevelAwait オプションは、トップレベルで await が使用されている場合にモジュールを async モジュールに変換します。webpack バージョン 5.83.0 以降、この機能はデフォルトで有効になっています。ただし、それ以前のバージョンでは、experiments.topLevelAwait を true に設定することで有効にできます。

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

このページを編集·このページを印刷

« 前へ

統計

その他のオプション