Эксперименты

эксперименты

boolean: false

experiments опция была введена в webpack 5, чтобы предоставить пользователям возможность активировать и опробовать экспериментальные функции.

Доступные опции:

asyncWebAssembly: Поддержка нового WebAssembly в соответствии с обновлённым спецификацией, это делает модуль WebAssembly асинхронным модулем. И он включён по умолчанию, когда experiments.futureDefaults установлен в значение true.
backCompat
buildHttp
cacheUnaffected
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

Включить слой обратной совместимости с предупреждениями о устаревании для многих API webpack 4.

Тип: 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 будет собирать модули, начинающиеся с 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 Modules: webpack сгенерирует уникальное имя для каждого класса CSS. Используйте расширение .module.css для CSS Modules.
5.87.0+ Разрешение полей, специфичных для стиля, в package.json файлах: webpack будет искать поле style в package.json файлах и использовать его, если оно существует, для импортов внутри CSS-файлов.

Например, если вы добавите @import 'bootstrap'; в свой CSS-файл, webpack будет искать bootstrap в node_modules и использовать поле style из package.json оттуда. Если поле style не найдено, webpack будет использовать поле main вместо него, чтобы сохранить обратную совместимость.
Хэш содержимого для CSS-файлов: webpack будет генерировать хэш содержимого для CSS-файлов и использовать его в имени файла. Это полезно для долгосрочного кэширования.
Экстракция CSS: webpack будет извлекать CSS в отдельный файл. Эта функциональность заменяет необходимость в mini-css-extract-plugin и css-loader, так как она обеспечивает родную поддержку.
Импорты CSS: webpack будет встраивать импорты CSS в сгенерированный CSS-файл.
Горячая замена модулей (HMR): webpack поддерживает HMR для CSS-файлов. Это означает, что изменения в CSS-файлах будут отображаться в браузере без полной перезагрузки страницы.

experiments.cacheUnaffected

Включить дополнительное кеширование в памяти модулей, которые не изменены и ссылаются только на неизменённые модули.

Тип: boolean

По умолчанию используется значение futureDefaults.

experiments.futureDefaults

Использовать значения по умолчанию следующей версии webpack и показывать предупреждения в любых проблематичных местах.

webpack.config.js

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

experiments.lazyCompilation

Компилировать точки входа и динамические import только при использовании. Может использоваться как для веб, так и для 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 преобразует модуль в async модуль, когда оператор await используется на верхнем уровне. Начиная с версии webpack 5.83.0, эта функция включена по умолчанию. Однако в версиях до этого вы можете включить её, установив experiments.topLevelAwait в значение true.

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

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/experiments