Вывод

Ключ верхнего уровня output содержит набор параметров, указывающих webpack, как и где выводить ваши бандлы, ресурсы и всё остальное, что вы скомпилировали или загрузили с помощью webpack.

output.assetModuleFilename

string = '[hash][ext][query]' function (pathData, assetInfo) => string

То же самое, что и output.filename, но для модулей ресурсов.

[name], [file], [query], [fragment], [base], и [path] устанавливаются в пустую строку для ресурсов, созданных путём замены данных URI.

output.asyncChunks

boolean = true

Создать асинхронные чанки, загружаемые по требованию.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    asyncChunks: true,
  },
};

output.auxiliaryComment

string object

При совместном использовании с output.library и output.libraryTarget, этот параметр позволяет пользователям вставлять комментарии в оболочку экспорта. Чтобы вставить один и тот же комментарий для каждого libraryTarget типа, установите auxiliaryComment в строку:

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'someLibName',
    libraryTarget: 'umd',
    filename: 'someLibName.js',
    auxiliaryComment: 'Test Comment',
  },
};

что приведёт к следующему:

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require('lodash'));
  // Test Comment
  else if (typeof define === 'function' && define.amd)
    define(['lodash'], factory);
  // Test Comment
  else if (typeof exports === 'object')
    exports['someLibName'] = factory(require('lodash'));
  // Test Comment
  else root['someLibName'] = factory(root['_']);
})(this, function (__WEBPACK_EXTERNAL_MODULE_1__) {
  // ...
});

Для более тонкого управления каждым комментарием libraryTarget передайте объект:

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    auxiliaryComment: {
      root: 'Root Comment',
      commonjs: 'CommonJS Comment',
      commonjs2: 'CommonJS2 Comment',
      amd: 'AMD Comment',
    },
  },
};

output.charset

boolean = true

Указывает webpack на добавление charset="utf-8" к тегу HTML <script>.

output.chunkFilename

string = '[id].js' function (pathData, assetInfo) => string

Этот параметр определяет имя файлов неинициализирующих чанков. Смотрите параметр output.filename для подробностей о возможных значениях.

Обратите внимание, что эти имена файлов необходимо генерировать во время выполнения, чтобы отправлять запросы на чанки. Из-за этого такие плейсхолдеры, как [name] и [chunkhash], должны добавить отображение от идентификатора чанка до значения плейсхолдера в выходной бандл с запущенной средой выполнения webpack. Это увеличивает размер и может сделать бандл недействительным, если значение плейсхолдера для любого чанка изменится.

По умолчанию используется [id].js, или значение, выведенное из output.filename ([name] заменяется на [id], или [id]. добавляется в начало).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js',
  },
};

Использование в виде функции:

webpack.config.js

module.exports = {
  //...
  output: {
    chunkFilename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

output.chunkFormat

false string: 'array-push' | 'commonjs' | 'module' | <any string>

Формат чанков (включённые по умолчанию форматы — 'array-push' (web/WebWorker), 'commonjs' (node.js), 'module' (ESM), но другие могут быть добавлены плагинами).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFormat: 'commonjs',
  },
};

output.chunkLoadTimeout

number = 120000

Количество миллисекунд до истечения срока действия запроса на чанк. Этот параметр поддерживается начиная с webpack 2.6.0.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadTimeout: 30000,
  },
};

output.chunkLoadingGlobal

string = 'webpackChunkwebpack'

Глобальная переменная используется webpack для загрузки чанков.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadingGlobal: 'myCustomFunc',
  },
};

output.chunkLoading

Метод загрузки чанков (включённые по умолчанию методы — 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (синхронный node.js), 'async-node' (асинхронный node.js), но другие могут быть добавлены плагинами).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoading: 'async-node',
  },
};

output.clean

5.20.0+

boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

module.exports = {
  //...
  output: {
    clean: true, // Clean the output directory before emit.
  },
};

module.exports = {
  //...
  output: {
    clean: {
      dry: true, // Log the assets that should be removed instead of deleting them.
    },
  },
};

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'.
    },
  },
};

// or

module.exports = {
  //...
  output: {
    clean: {
      keep(asset) {
        return asset.includes('ignored/dir');
      },
    },
  },
};

Вы также можете использовать его с хуком:

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
  'Test',
  (asset) => {
    if (/ignored\/dir\//.test(asset)) return true;
  }
);

output.compareBeforeEmit

boolean = true

Указывает webpack проверить, существует ли файл, который должен быть выведен, и совпадает ли его содержимое до записи в систему вывода.

module.exports = {
  //...
  output: {
    compareBeforeEmit: false,
  },
};

output.crossOriginLoading

boolean = false string: 'anonymous' | 'use-credentials'

Указывает webpack на включение загрузки из разных источников чанков. Действует только при значении target 'web', которое использует JSONP для загрузки по требованию чанков путём добавления тегов script.

'anonymous' - Включить загрузку из разных источников без учётных данных
'use-credentials' - Включить загрузку из разных источников с учётными данными

output.cssChunkFilename

string function (pathData, assetInfo) => string

Этот параметр определяет имя файлов выходных CSS-частей, не являющихся начальными, на диске. См. параметр output.filename для получения подробностей о возможных значениях.

Вы не должны указывать здесь абсолютный путь. Однако вы можете использовать папки, разделённые символом '/'. Указанный путь объединяется со значением output.path для определения местоположения на диске.

output.cssFilename

string function (pathData, assetInfo) => string

Этот параметр определяет имя файлов выходных CSS на диске. См. параметр output.filename для получения подробностей о возможных значениях.

output.devtoolFallbackModuleFilenameTemplate

string function (info)

Используется в качестве резервного варианта, когда строка шаблона или функция выше дают дубликаты.

См. output.devtoolModuleFilenameTemplate.

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' function (info) => string

Этот параметр используется только тогда, когда devtool использует параметр, требующий имён модулей.

Настройте имена, используемые в массиве sources каждого файла карты источника. Это можно сделать, передав строку шаблона или функцию. Например, при использовании devtool: 'eval'.

webpack.config.js

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate:
      'webpack://[namespace]/[resource-path]?[loaders]',
  },
};

В строках шаблонов доступны следующие подстановки (через внутреннюю функцию webpack ModuleFilenameHelpers):

Шаблон	Описание
[absolute-resource-path]	Абсолютное имя файла
[all-loaders]	Автоматические и явные загрузчики и параметры до имени первого загрузчика
[hash]	Хэш идентификатора модуля
[id]	Идентификатор модуля
[loaders]	Явные загрузчики и параметры до имени первого загрузчика
[resource]	Путь, используемый для разрешения файла, и любые параметры запроса, используемые первым загрузчиком
[resource-path]	Путь, используемый для разрешения файла без параметров запроса
[namespace]	Пространство имён модулей. Обычно имя библиотеки при построении библиотеки, пустое в противном случае

При использовании функции те же параметры доступны в формате с маленькими буквами через параметр info.

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate: (info) => {
      return `webpack:///${info.resourcePath}?${info.loaders}`;
    },
  },
};

Если несколько модулей приведут к одному и тому же имени, вместо них используется output.devtoolFallbackModuleFilenameTemplate.

output.devtoolNamespace

string

Этот параметр определяет пространство имён модуля, используемое с output.devtoolModuleFilenameTemplate. Если не указано, по умолчанию используется значение output.uniqueName. Используется для предотвращения конфликтов путей к файлам источника в файлах карты источника при загрузке нескольких библиотек, созданных с помощью webpack.

Например, если у вас 2 библиотеки с пространствами имён library1 и library2, которые оба имеют файл ./src/index.js (возможно, с различным содержимым), они будут отображаться как webpack://library1/./src/index.js и webpack://library2/./src/index.js.

Вы можете использовать строки шаблонов, такие как [name], чтобы динамически генерировать пространства имён на основе контекста сборки, обеспечивая дополнительную гибкость.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name]-bundle.js',
    library: 'library-[name]',
    libraryTarget: 'commonjs',
    devtoolNamespace: 'library-[name]', // Sets a unique namespace for each library
  },
};

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]

Список типов загрузки чанков, включённых для использования точками входа. Будет автоматически заполнен webpack. Требуется только при использовании функции в качестве параметра входа и возвращении параметра chunkLoading из неё.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    enabledChunkLoadingTypes: ['jsonp', 'require'],
  },
};

output.enabledLibraryTypes

[string]

Список типов библиотек, включённых для использования точками входа.

module.exports = {
  //...
  output: {
    enabledLibraryTypes: ['module'],
  },
};

output.enabledWasmLoadingTypes

[string]

Список типов загрузки wasm, включённых для использования точками входа.

module.exports = {
  //...
  output: {
    enabledWasmLoadingTypes: ['fetch'],
  },
};

output.environment

Укажите webpack, какие возможности ES могут быть использованы в сгенерированном коде runtime.

module.exports = {
  output: {
    environment: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: true,
      // The environment supports async function and await ('async function () { await ... }').
      asyncFunction: true,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: true,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: true,
      // The environment supports 'document' variable.
      document: true,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports an async import() when creating a worker, only for web targets at the moment.
      dynamicImportInWorker: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: true,
      // The environment supports 'globalThis'.
      globalThis: true,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
      // Determines if the node: prefix is generated for core module imports in environments that support it.
      // This is only applicable to Webpack runtime code.
      nodePrefixForCoreModules: false,
      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
      optionalChaining: true,
      // The environment supports template literals.
      templateLiteral: true,
    },
  },
};

output.filename

string function (pathData, assetInfo) => string

Этот параметр определяет имя каждого выходного пакета. Пакет записывается в каталог, указанный параметром output.path.

Для единственной точки входа entry это может быть статическое имя.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js',
  },
};

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

Использование имени входа:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].bundle.js',
  },
};

Использование внутреннего идентификатора блока:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js',
  },
};

Использование хэшей, сгенерированных из сгенерированного содержимого:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.js',
  },
};

Комбинирование нескольких подстановок:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

Использование функции для возвращения имени файла:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

Убедитесь, что прочитали руководство по кэшированию Caching guide для получения подробностей. Существует больше шагов, чем просто установка этого параметра.

Обратите внимание, что этот параметр называется filename, но вы всё ещё можете использовать что-то вроде 'js/[name]/bundle.js' для создания структуры каталогов.

Строки шаблонов

Следующие подстановки доступны в строках шаблонов (через внутренний механизм webpack TemplatedPathPlugin):

Подстановки, доступные на уровне компиляции:

Шаблон	Описание
[fullhash]	Полный хэш компиляции
[hash]	То же самое, но устаревшее

Подстановки, доступные на уровне блока:

Шаблон	Описание
[id]	Идентификатор блока
[name]	Имя блока, если задано, иначе идентификатор блока
[chunkhash]	Хэш блока, включающий все элементы блока
[contenthash]	Хэш блока, включающий только элементы этого типа содержимого (затронуто `optimization.realContentHash`)

Подстановки, доступные на уровне модуля:

Шаблон	Описание
[id]	Идентификатор модуля
[moduleid]	То же самое, но устаревшее
[hash]	Хэш модуля
[modulehash]	То же самое, но устаревшее
[contenthash]	Хэш содержимого модуля

Подстановки, доступные на уровне файла:

Шаблон	Описание
[file]	Имя файла и путь без запроса или фрагмента
[query]	Запрос с ведущим `?`
[fragment]	Фрагмент с ведущим `#`
[base]	Только имя файла (включая расширения), без пути
[filebase]	То же самое, но устаревшее
[path]	Только путь без имени файла
[name]	Только имя файла без расширения или пути
[ext]	Расширение с ведущим `.` (не доступно для output.filename)

Подстановки, доступные на уровне URL:

Шаблон	Описание
[url]	URL

Длина хэшей ([hash], [contenthash] или [chunkhash]) может быть указана с помощью [hash:16] (по умолчанию 20). В качестве альтернативы, укажите output.hashDigestLength для глобальной настройки длины.

Можно отфильтровать замену плейсхолдеров, когда вы хотите использовать один из плейсхолдеров в фактическом имени файла. Например, чтобы вывести файл [name].js, необходимо экранировать плейсхолдер [name] добавлением обратных слэшей между скобками. Таким образом [\name\] сгенерирует [name] вместо замены на name ресурса.

Пример: [\id\] сгенерирует [id] вместо замены на id.

Если для этого параметра используется функция, функция получит объект, содержащий данные для подстановок в таблице выше. Подстановки также будут применены к возвращённой строке. Переданный объект будет иметь такой тип: (доступные свойства в зависимости от контекста)

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string;
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};
type ChunkPathData = {
  id: string | number;
  name: string;
  hash: string;
  hashWithLength: (number) => string;
  contentHash: Record<string, string>;
  contentHashWithLength: Record<string, (number) => string>;
};
type ModulePathData = {
  id: string | number;
  hash: string;
  hashWithLength: (number) => string;
};

output.globalObject

string = 'self'

При работе с библиотекой, особенно когда library.type равно 'umd', этот параметр указывает, какой глобальный объект будет использоваться для установки библиотеки. Чтобы сделать UMD сборку доступной как в браузерах, так и в Node.js, установите параметр output.globalObject в значение 'this'. По умолчанию для веб-подобных целей это self.

Значение вашей точки входа будет присвоено глобальному объекту с помощью значения output.library.name. В зависимости от значения параметра type глобальный объект может измениться, например, self, global, или globalThis.

Например:

webpack.config.js

module.exports = {
  // ...
  output: {
    library: {
      name: 'myLib',
      type: 'umd',
    },
    filename: 'myLib.js',
    globalObject: 'this',
  },
};

output.hashDigest

string = 'hex'

Кодировка, используемая при генерации хэша. Поддерживаются все кодировки из Node.JS' hash.digest. Использование 'base64' для имён файлов может быть проблематичным, так как в нём есть символ / в алфавите. Аналогично 'latin1' может содержать любой символ.

output.hashDigestLength

number = 20

Длина префикса хэша, которая будет использоваться.

output.hashFunction

string = 'md4' function

Алгоритм хэширования для использования. Поддерживаются все функции из Node.JS' crypto.createHash. Начиная с 4.0.0-alpha2, hashFunction теперь может быть конструктором пользовательской функции хэширования. Вы можете предоставить не-криптографическую функцию хэширования для повышения производительности.

module.exports = {
  //...
  output: {
    hashFunction: require('metrohash').MetroHash64,
  },
};

Убедитесь, что функция хеширования будет иметь доступные методы update и digest.

output.hashSalt

Необязательная соль для обновления хэша через Node.JS' hash.update.

output.hotUpdateChunkFilename

string = '[id].[fullhash].hot-update.js'

Настройте имена файлов обновлений для горячих блоков. Для получения подробной информации о возможных значениях см. параметр output.filename.

Единственные разрешённые плейсхолдеры здесь — [id] и [fullhash], по умолчанию:

webpack.config.js

module.exports = {
  //...
  output: {
    hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
  },
};

output.hotUpdateGlobal

string

Используется только тогда, когда target установлен на 'web', который использует JSONP для загрузки горячих обновлений.

Функция JSONP используется для асинхронной загрузки блоков горячих обновлений.

Для получения подробностей см. output.chunkLoadingGlobal.

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json' function

Настройте имя файла главного горячего обновления. [fullhash] и [runtime] доступны в качестве плейсхолдеров.

output.iife

boolean = true

Указывает webpack на добавление обертки IIFE вокруг выводимого кода.

module.exports = {
  //...
  output: {
    iife: true,
  },
};

output.ignoreBrowserWarnings

5.81.0+

boolean = false

Скрыть предупреждения из консоли браузера в режиме производства. Этот параметр не влияет на вывод в терминале/консоли.

webpack.config.js

module.exports = {
  //...
  output: {
    ignoreBrowserWarnings: true,
  },
};

output.importFunctionName

string = 'import'

Имя нативного import() функции. Может использоваться для полифиллинга, например, с dynamic-import-polyfill.

webpack.config.js

module.exports = {
  //...
  output: {
    importFunctionName: '__import__',
  },
};

output.importMetaName

string

Имя нативного import.meta объекта (может быть заменено на полифилл).

webpack.config.js

module.exports = {
  //...
  output: {
    importMetaName: 'pseudoImport.meta',
  },
};

output.library

Выводить библиотеку, экспортирующую экспорт вашей точки входа.

Тип: string | string[] | object

Давайте рассмотрим пример.

webpack.config.js

module.exports = {
  // …
  entry: './src/index.js',
  output: {
    library: 'MyLibrary',
  },
};

Предположим, что вы экспортировали функцию в своей src/index.js точке входа:

export function hello(name) {
  console.log(`hello ${name}`);
}

Теперь переменная MyLibrary будет связана с экспортом вашего файла входа, и вот как использовать скомпонованную вебпаком библиотеку:

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello('webpack');
</script>

В приведенном выше примере мы передаём один файл входа в entry, однако вебпак может принимать множество типов точек входа, например, array, или object.

Если вы предоставляете array в качестве entry точки, то будет экспортирована только последняя из них в массиве.
```
module.exports = {
  // …
  entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed
  output: {
    library: 'MyLibrary',
  },
};
```
Если предоставляется object в качестве entry точки, все точки входа могут быть экспортированы с использованием синтаксиса array от library.
```
module.exports = {
  // …
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    library: ['MyLibrary', '[name]'], // name is a placeholder here
  },
};
```
Предполагая, что как a.js, так и b.js экспортируют функцию hello, вот как использовать библиотеки:
```
<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello('webpack');
  MyLibrary.b.hello('webpack');
</script>
```
См. этот пример для получения дополнительной информации.

Обратите внимание, что вышеуказанная конфигурация не будет работать должным образом, если вы собираетесь настроить параметры библиотеки для каждой точки входа. Вот как это сделать для каждой вашей точки входа:
```
module.exports = {
  // …
  entry: {
    main: {
      import: './src/index.js',
      library: {
        // all options under `output.library` can be used here
        name: 'MyLibrary',
        type: 'umd',
        umdNamedDefine: true,
      },
    },
    another: {
      import: './src/another.js',
      library: {
        name: 'AnotherLibrary',
        type: 'commonjs2',
      },
    },
  },
};
```

output.library.amdContainer

5.78.0+

Использовать контейнер (определённый в глобальном пространстве) для вызова define/require функций в модуле AMD.

module.exports = {
  // …
  output: {
    library: {
      amdContainer: 'window["clientContainer"]',
      type: 'amd', // or 'amd-require'
    },
  },
};

Что приведёт к следующему бандлу:

window['clientContainer'].define(/*define args*/); // or 'amd-require' window['clientContainer'].require(/*require args*/);

output.library.name

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
    },
  },
};

Укажите имя для библиотеки.

Тип:

string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}

output.library.type

Настройте способ экспорта библиотеки.

Тип: string

По умолчанию включены типы 'var', 'module', 'modern-module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'commonjs-static', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' и 'system', но могут быть добавлены и другие плагинами.

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

Экспорт Переменной

Эти параметры присваивают возвращаемое значение точки входа (то, что экспортировала точка входа) имени, указанному в output.library.name, в области видимости, в которой был включён бандл.

type: 'var'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
    },
  },
};

При загрузке вашей библиотеки возвращаемое значение вашей точки входа будет присвоено переменной:

var MyLibrary = _entry_return_;

// In a separate script with `MyLibrary` loaded…
MyLibrary.doSomething();

type: 'assign'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign',
    },
  },
};

Это сгенерирует неявную глобальную переменную, которая может перезаписать существующее значение (используйте с осторожностью):

MyLibrary = _entry_return_;

Обратите внимание, что если MyLibrary не определено ранее, ваша библиотека будет установлена в глобальной области видимости.

type: 'assign-properties'

5.16.0+

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign-properties',
    },
  },
};

Аналогично type: 'assign', но более безопасный вариант, так как он будет повторно использовать MyLibrary если оно уже существует:

// only create MyLibrary if it doesn't exist
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// then copy the return value to MyLibrary
// similarly to what Object.assign does

// for instance, you export a `hello` function in your entry as follow
export function hello(name) {
  console.log(`Hello ${name}`);
}

// In another script with MyLibrary loaded
// you can run `hello` function like so
MyLibrary.hello('World');

Экспорт через Присвоение Объекту

Эти параметры присваивают возвращаемое значение точки входа (то, что экспортировала точка входа) определённому объекту по имени, заданному в output.library.name.

type: 'this'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'this',
    },
  },
};

Возвращаемое значение вашей точки входа будет присвоено this в свойстве с именем, указанным output.library.name. Значение this зависит от вас:

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if `this` is window

type: 'window'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'window',
    },
  },
};

Возвращаемое значение вашей точки входа будет присвоено объекту window с использованием значения output.library.name.

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

type: 'global'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'global',
    },
  },
};

Возвращаемое значение вашей точки входа будет присвоено глобальному объекту с использованием значения output.library.name. В зависимости от значения target, глобальный объект может соответственно измениться, например, self, global или globalThis.

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

type: 'commonjs'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'commonjs',
    },
  },
};

Возвращаемое значение вашей точки входа будет присвоено объекту exports с использованием значения output.library.name. Как следует из названия, используется в средах CommonJS.

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

Системы Определения Модулей

Эти параметры приведут к бандлу с полным заголовком для обеспечения совместимости с различными системами модулей. Параметр output.library.name примет другое значение в зависимости от следующих параметров output.library.type.

type: 'module'

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // do not specify a `name` here
      type: 'module',
    },
  },
};

Вывод ES модуля.

Однако эта функция всё ещё экспериментальна и не полностью поддерживается, поэтому убедитесь, что предварительно включена experiments.outputModule. Кроме того, вы можете отслеживать ход разработки на этой странице.

type: 'modern-module'

v5.93.0+

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // do not specify a `name` here
      type: 'modern-module',
    },
  },
};

Эта конфигурация генерирует оптимизируемый вывод для ES Модулей.

Однако эта функция всё ещё экспериментальна и не полностью поддерживается, поэтому убедитесь, что предварительно включена experiments.outputModule.

type: 'commonjs2'

module.exports = {
  // …
  output: {
    library: {
      // note there's no `name` here
      type: 'commonjs2',
    },
  },
};

Возвращаемое значение вашей точки входа будет присвоено module.exports. Как следует из названия, используется в средах Node.js (CommonJS):

module.exports = _entry_return_;

require('MyLibrary').doSomething();

Если мы укажем output.library.name с type: commmonjs2, возвращаемое значение вашей точки входа будет присвоено module.exports.[output.library.name].

type: 'commonjs-module'

commonjs-module эквивалентно commonjs2. Мы можем удалить commonjs-module в будущих версиях.

type: 'commonjs-static'

5.66.0+

module.exports = {
  // …
  output: {
    library: {
      // note there's no `name` here
      type: 'commonjs-static',
    },
  },
};

Отдельные экспорты будут установлены в качестве свойств на module.exports. «Статический» в названии означает, что вывод может быть статически проанализирован, и, таким образом, именованные экспорты импортируемы в ESM через Node.js:

Вход:

export function doSomething() {}

Вывод:

function doSomething() {}

// …

exports.doSomething = __webpack_exports__.doSomething;

Использование (CommonJS):

const { doSomething } = require('./output.cjs'); // doSomething => [Function: doSomething]

Использование (ESM):

import { doSomething } from './output.cjs'; // doSomething => [Function: doSomething]

type: 'amd'

Это экспортирует вашу библиотеку как модуль AMD.

Модули AMD требуют, чтобы чанк входа (например, первый загруженный скрипт с тэгом <script> ) был определён со специфическими свойствами, такими как define и require, которые обычно предоставляются RequireJS или совместимыми загрузчиками (такими как almond). В противном случае, прямое загрузка результирующего AMD бандла приведёт к ошибке, подобной define is not defined.

С следующей конфигурацией...

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd',
    },
  },
};

Сгенерированный вывод будет определён с именем "MyLibrary", то есть:

define('MyLibrary', [], function () {
  return _entry_return_;
});

Бандл может быть включён как часть тега script, и вызван так:

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

Если output.library.name не определено, вместо этого генерируется следующее.

define(function () {
  return _entry_return_;
});

Этот бандл не будет работать должным образом, или вообще не будет работать (в случае с загрузчиком almond), если загружен напрямую с тэгом <script>. Он будет работать только через совместимый с RequireJS асинхронный загрузчик модулей через фактический путь к этому файлу, поэтому в этом случае output.path и output.filename могут стать важными для этой конкретной настройки, если они экспортируются напрямую на сервере.

type: 'amd-require'

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd-require',
    },
  },
};

Это упаковывает ваш вывод с немедленно выполняемым AMD require(dependencies, factory) оберточным элементом.

Тип 'amd-require' позволяет использовать зависимости AMD без необходимости отдельного последующего вызова. Как и тип 'amd', это зависит от того, доступна ли в среде, в которой загружается вывод вебпака, соответствующая require функция.

С этим типом имя библиотеки не может быть использовано.

type: 'umd'

Это экспортирует вашу библиотеку под всеми определениями модулей, позволяя ей работать с CommonJS, AMD и как глобальная переменная. Обратитесь к репозиторию UMD для получения дополнительной информации.

В этом случае вам нужно свойство library.name для наименования модуля:

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
  },
};

И, наконец, вывод:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(global, function () {
  return _entry_return_;
});

Обратите внимание, что опускание library.name приведёт к присвоению всех свойств, возвращаемых точкой входа, напрямую корневому объекту, как описано в разделе «Присвоение объекту». Пример:

module.exports = {
  //...
  output: {
    type: 'umd',
  },
};

Вывод будет:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(global, function () {
  return _entry_return_;
});

Вы можете указать объект для library.name для разных имён по целям:

module.exports = {
  //...
  output: {
    library: {
      name: {
        root: 'MyLibrary',
        amd: 'my-library',
        commonjs: 'my-common-library',
      },
      type: 'umd',
    },
  },
};

type: 'system'

Это позволит экспонировать вашу библиотеку в качестве System.register модуля. Эта функция была впервые выпущена в webpack 4.30.0.

Модули System требуют, чтобы глобальная переменная System была присутствует в браузере при выполнении webpack пакета. Компиляция в формате System.register позволяет вам System.import('/bundle.js') без дополнительной конфигурации и загружает ваш webpack пакет в реестр модулей System.

module.exports = {
  //...
  output: {
    library: {
      type: 'system',
    },
  },
};

Вывод:

System.register([], function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
  return {
    execute: function () {
      // ...
    },
  };
});

Добавив output.library.name в конфигурацию, а также установив output.library.type в system, выходной пакет будет иметь имя библиотеки в качестве аргумента к System.register:

System.register(
  'MyLibrary',
  [],
  function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
    return {
      execute: function () {
        // ...
      },
    };
  }
);

Другие типы

тип: 'jsonp'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'jsonp',
    },
  },
};

Это обернёт значение возврата вашей точки входа в обёртку jsonp.

MyLibrary(_entry_return_);

Зависимости вашей библиотеки будут определены конфигурацией externals.

output.library.export

Укажите, какой экспорт должен быть экспонирован как библиотека.

Тип: string | string[]

По умолчанию используется undefined, который экспортирует весь объект (пространство имён). Примеры ниже демонстрируют влияние этой конфигурации при использовании output.library.type: 'var'.

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: 'default',
    },
  },
};

Экспорт по умолчанию вашей точки входа будет присвоен имени библиотеки:

// if your entry has a default export
var MyLibrary = _entry_return_.default;

Вы также можете передать массив в output.library.export, он будет интерпретирован как путь к модулю, который будет присвоен имени библиотеки:

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: ['default', 'subModule'],
    },
  },
};

И вот код библиотеки:

var MyLibrary = _entry_return_.default.subModule;

output.library.auxiliaryComment

Добавьте комментарий в обёртку UMD.

Тип: string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

Чтобы вставить тот же комментарий для каждого типа umd, установите auxiliaryComment в строку:

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: 'Test Comment',
    },
  },
};

что даст следующий результат:

(function webpackUniversalModuleDefinition(root, factory) {
  //Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  //Test Comment
  else if (typeof define === 'function' && define.amd) define([], factory);
  //Test Comment
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  //Test Comment
  else root['MyLibrary'] = factory();
})(self, function () {
  return _entry_return_;
});

Для точного управления передайте объект:

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: {
        root: 'Root Comment',
        commonjs: 'CommonJS Comment',
        commonjs2: 'CommonJS2 Comment',
        amd: 'AMD Comment',
      },
    },
  },
};

output.library.umdNamedDefine

boolean

При использовании output.library.type: "umd", установка output.library.umdNamedDefine в true даст имя AMD-модулю в UMD-билде. В противном случае используется анонимный define.

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      umdNamedDefine: true,
    },
  },
};

AMD-модуль будет:

define('MyLibrary', [], factory);

output.libraryExport

string [string]

Настройте, какой модуль или модули будут экспонированы через libraryTarget. По умолчанию используется undefined, тот же результат будет, если вы установите libraryTarget в пустую строку, например, '', и будет экспортирован весь объект (пространство имён). Примеры ниже демонстрируют влияние этой конфигурации при использовании libraryTarget: 'var'.

Поддерживаются следующие конфигурации:

libraryExport: 'default' - Будет присвоено **экспорт по умолчанию вашей точки входа** целевому объекту библиотеки:

// if your entry has a default export of `MyDefaultModule`
var MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - Будет присвоено **указанный модуль** целевому объекту библиотеки:

var MyModule = _entry_return_.MyModule;

libraryExport: ['MyModule', 'MySubModule'] - Массив интерпретируется как **путь к модулю**, который будет присвоен целевому объекту библиотеки:

var MySubModule = _entry_return_.MyModule.MySubModule;

С указанными выше конфигурациями libraryExport, получившиеся библиотеки могут быть использованы следующим образом:

MyDefaultModule.doSomething();
MyModule.doSomething();
MySubModule.doSomething();

output.libraryTarget

string = 'var'

Настройте, как библиотека будет экспонирована. Можно использовать любой из следующих вариантов. Обратите внимание, что этот параметр работает совместно со значением, присвоенным output.library. Для следующих примеров предполагается, что значение output.library настроено как MyLibrary.

Экспонирование переменной

Эти параметры присваивают значение возврата точки входа (например, то, что экспортировала точка входа) имени, заданному output.library, в любом контексте, где включён пакет.

libraryTarget: 'var'

При загрузке вашей библиотеки **значение возврата вашей точки входа** будет присвоено переменной:

var MyLibrary = _entry_return_;

// In a separate script...
MyLibrary.doSomething();

libraryTarget: 'assign'

MyLibrary = _entry_return_;

Обратите внимание, что если MyLibrary не определено ранее, ваша библиотека будет установлена в глобальной области.

libraryTarget: 'assign-properties'

5.16.0+

Скопировать значение возврата в целевый объект, если он существует, иначе создать целевый объект сначала:

// create the target object if it doesn't exist
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// then copy the return value to MyLibrary
// similarly to what Object.assign does

// for instance, you export a `hello` function in your entry as follow
export function hello(name) {
  console.log(`Hello ${name}`);
}

// In another script running MyLibrary
// you can run `hello` function like so
MyLibrary.hello('World');

Экспонирование через присваивание объекта

Эти параметры присваивают значение возврата точки входа (например, то, что экспортировала точка входа) конкретному объекту под именем, определённым output.library.

Если output.library не назначено непустой строкой, по умолчанию все свойства, возвращаемые точкой входа, будут присвоены объекту, как определено для данного output.libraryTarget, через следующий фрагмент кода:

(function (e, a) {
  for (var i in a) {
    e[i] = a[i];
  }
})(output.libraryTarget, _entry_return_);

libraryTarget: 'this'

**Значение возврата вашей точки входа** будет присвоено this под свойством, названным output.library. Значение this зависит от вас:

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if this is window

libraryTarget: 'window'

**Значение возврата вашей точки входа** будет присвоено объекту window с использованием значения output.library.

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

libraryTarget: 'global'

**Значение возврата вашей точки входа** будет присвоено объекту global с использованием значения output.library.

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

libraryTarget: 'commonjs'

**Значение возврата вашей точки входа** будет присвоено объекту exports с использованием значения output.library. Как следует из названия, используется в средах CommonJS.

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

Системы определения модулей

Эти параметры приведут к пакету, который поставляется с полным заголовком для обеспечения совместимости с различными системами модулей. Параметр output.library будет иметь разное значение в зависимости от следующих параметров output.libraryTarget.

libraryTarget: 'module'

Вывод ES Модуля. Убедитесь, что вы предварительно включили experiments.outputModule.

Обратите внимание, что эта функция пока не полностью поддерживается, следите за прогрессом в этом потоке обсуждения.

libraryTarget: 'commonjs2'

**Значение возврата вашей точки входа** будет присвоено module.exports. Как следует из названия, используется в средах CommonJS:

module.exports = _entry_return_;

require('MyLibrary').doSomething();

Обратите внимание, что output.library нельзя использовать с данным конкретным output.libraryTarget, для получения более подробной информации, пожалуйста, прочитайте этот вопрос.

libraryTarget: 'amd'

Это позволит экспонировать вашу библиотеку как AMD-модуль.

AMD-модули требуют, чтобы кусок входа (например, первый загруженный скрипт с помощью тега <script> ) был определён со специфическими свойствами, такими как define и require, что обычно предоставляется RequireJS или любыми совместимыми загрузчиками (такими как almond). В противном случае непосредственная загрузка результирующего AMD-пакета приведёт к ошибке, подобной define is not defined.

С следующей конфигурацией...

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'amd',
  },
};

Сгенерированный вывод будет определён с именем "MyLibrary", т.е.

define('MyLibrary', [], function () {
  return _entry_return_;
});

Пакет можно включить в качестве тега script, и вызвать его так:

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

Если output.library не определено, вместо этого будет сгенерировано следующее.

define([], function () {
  return _entry_return_;
});

Этот пакет не будет работать должным образом или вообще не будет работать (в случае загрузчика almond) при прямой загрузке с помощью тега <script>. Он будет работать только через совместимый с RequireJS асинхронный загрузчик модулей по фактическому пути к этому файлу, поэтому в этом случае output.path и output.filename могут стать важными для данной конфигурации, если они экспонированы непосредственно на сервере.

libraryTarget: 'amd-require'

Этот пакет упаковывает ваш вывод с немедленно выполняемым оболочкой AMD require(dependencies, factory).

Целевой 'amd-require' позволяет использовать зависимости AMD без необходимости отдельного последующего вызова. Как и с целевым 'amd', это зависит от наличия соответствующей require функции в среде, в которой загружается вывод webpack.

С этой целью имя библиотеки игнорируется.

libraryTarget: 'umd'

Это экспонирует вашу библиотеку под всеми определениями модулей, позволяя ей работать с CommonJS, AMD и как глобальной переменной. Ознакомьтесь с репозиторием UMD для получения дополнительной информации.

В этом случае вам нужна свойство library для именования вашего модуля:

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
};

И, наконец, результат:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

Обратите внимание, что опуская library, приведет к присвоению всех свойств, возвращаемых точкой входа, напрямую корневому объекту, как описано в разделе присвоение объектов. Пример:

module.exports = {
  //...
  output: {
    libraryTarget: 'umd',
  },
};

Вывод будет:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

Начиная с webpack 3.1.0, вы можете указать объект для library для различных имен по разным целям:

module.exports = {
  //...
  output: {
    library: {
      root: 'MyLibrary',
      amd: 'my-library',
      commonjs: 'my-common-library',
    },
    libraryTarget: 'umd',
  },
};

libraryTarget: 'system'

Это позволит экспонировать вашу библиотеку как модуль System.register. Эта функция была впервые выпущена в webpack 4.30.0.

Модули System требуют, чтобы глобальная переменная System была присутствовать в браузере во время выполнения пакета webpack. Компиляция в формат System.register позволяет вам System.import('/bundle.js') без дополнительной конфигурации и загружает ваш пакет webpack в реестр модулей System.

module.exports = {
  //...
  output: {
    libraryTarget: 'system',
  },
};

Вывод:

System.register([], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

Добавив output.library в конфигурацию, а также установив output.libraryTarget в system, выходной пакет будет иметь имя библиотеки как аргумент для System.register.

System.register('my-library', [], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

Вы можете получить доступ к контексту SystemJS через __system_context__.

// Log the URL of the current SystemJS module
console.log(__system_context__.meta.url);

// Import a SystemJS module, with the current SystemJS module's url as the parentUrl
__system_context__.import('./other-file.js').then((m) => {
  console.log(m);
});

Другие цели

libraryTarget: 'jsonp'

Это позволит обернуть результат вашей точки входа в оболочку jsonp.

MyLibrary(_entry_return_);

Зависимости вашей библиотеки будут определены конфигурацией externals.

output.module

boolean = false

Вывод JavaScript-файлов в виде модулей. Отключен по умолчанию, так как это экспериментальная функция.

При включении webpack установит output.iife в false, output.scriptType в 'module' и terserOptions.module в true внутри.

Если вы используете webpack для компиляции библиотеки, которую будут использовать другие, убедитесь, что установили output.libraryTarget в 'module' когда output.module установлено в true.

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

output.path

string = path.join(process.cwd(), 'dist')

Директория вывода в виде абсолютного пути.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
};

Обратите внимание, что [fullhash] в этом параметре будет заменено хэшем компиляции. См. Руководство по кэшированию для получения подробностей.

output.pathinfo

boolean=true string: 'verbose'

Указывает webpack включать комментарии в пакеты с информацией о содержащихся модулях. Этот параметр по умолчанию true в режиме development и false в режиме production режима соответственно. 'verbose' отображает больше информации, такую как экспорт, требования к времени выполнения и отката.

webpack.config.js

module.exports = {
  //...
  output: {
    pathinfo: true,
  },
};

output.publicPath

Тип:
- function
- string
  
  output.publicPath по умолчанию 'auto' с web и web-worker целевыми значениями, см. это руководство для случаев его использования.

Этот параметр важен при использовании загрузки по требованию или загрузки внешних ресурсов, таких как изображения, файлы и т. д. Если указано неверное значение, при загрузке этих ресурсов будут отображаться ошибки 404.

Этот параметр указывает общедоступный URL каталога вывода, при ссылке в браузере. Относительный URL разрешается относительно HTML-страницы (или тега <base>). Также возможны и иногда необходимы серверные относительные URL-адреса, URL-адреса с относительным протоколом или абсолютные URL-адреса, например, при размещении ресурсов на CDN.

Значение параметра добавляется к каждому URL, созданному временем выполнения или загрузчиками. Из-за этого значение этого параметра заканчивается на / в большинстве случаев.

Правило, которое следует учитывать: URL вашего output.path с точки зрения HTML-страницы.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/',
  },
};

Для этой конфигурации:

webpack.config.js

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js',
  },
};

Запрос к фрагменту будет выглядеть как /assets/4.chunk.js.

Загрузчик, выводящий HTML, может выводить что-то вроде этого:

<link href="/assets/spinner.gif" />

или при загрузке изображения в CSS:

background-image: url(/assets/spinner.gif);

Webpack-dev-сервер также использует подсказку из publicPath, используя её для определения места обслуживания выходных файлов.

Обратите внимание, что [fullhash] в этом параметре будет заменен хэшем компиляции. См. Руководство по кэшированию для получения подробностей.

Примеры:

module.exports = {
  //...
  output: {
    // One of the below
    publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
  },
};

В тех случаях, когда publicPath выходных файлов нельзя узнать во время компиляции, его можно оставить пустым и динамически установить во время выполнения в файле входа, используя свободную переменную __webpack_public_path__.

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

См. это обсуждение для получения дополнительной информации о __webpack_public_path__.

output.scriptType

string: 'module' | 'text/javascript' boolean = false

Этот параметр позволяет загружать асинхронные фрагменты с помощью пользовательского типа сценария, такого как <script type="module" ...>.

module.exports = {
  //...
  output: {
    scriptType: 'module',
  },
};

output.sourceMapFilename

string = '[file].map[query]'

Настройте, как называются карты исходных кодов. Действует только если devtool установлено в 'source-map', которое записывает выходной файл.

Замены [name], [id], [fullhash] и [chunkhash] из output.filename могут быть использованы. В дополнение к ним вы можете использовать подстановки, указанные в разделе «Уровень имени файла» в Строки шаблонов.

output.sourcePrefix

string = ''

Изменить префикс для каждой строки в выходных пакетах.

webpack.config.js

module.exports = {
  //...
  output: {
    sourcePrefix: '\t',
  },
};

output.strictModuleErrorHandling

Обрабатывает ошибки загрузки модулей в соответствии со спецификацией EcmaScript Modules с затратами на производительность.

Тип: boolean
Доступно: 5.25.0+

module.exports = {
  //...
  output: {
    strictModuleErrorHandling: true,
  },
};

output.strictModuleExceptionHandling

boolean = false

Укажите webpack удалить модуль из кэша модулей (require.cache) если он выбросит исключение при require.

По умолчанию установлено false по соображениям производительности.

Когда установлено в false, модуль не удаляется из кэша, что приводит к тому, что исключение выбрасывается только при первом require вызове (что делает его несовместимым с node.js).

Например, рассмотрим module.js:

throw new Error('error');

При strictModuleExceptionHandling установленном на false, только первый require выбросит исключение:

// with strictModuleExceptionHandling = false
require('module'); // <- throws
require('module'); // <- doesn't throw

Вместо этого, с strictModuleExceptionHandling установленным на true, все require этого модуля выбрасывают исключение:

// with strictModuleExceptionHandling = true
require('module'); // <- throws
require('module'); // <- also throws

output.trustedTypes

true string object

5.37.0+

Управление совместимостью Trusted Types. При включении, webpack будет определять поддержку Trusted Types и, если она есть, использовать политики Trusted Types для создания URL-адресов скриптов, которые он загружает динамически. Используется, когда приложение работает под require-trusted-types-for директивой Content Security Policy.

По умолчанию отключено (нет совместимости, URL-адреса скриптов — строки).

При установке в true, webpack будет использовать output.uniqueName в качестве имени политики Trusted Types.
При установке в непустую строку, её значение будет использовано в качестве имени политики.
При установке в объект, имя политики берётся из свойства объекта policyName.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
    },
  },
};

output.trustedTypes.onPolicyCreationFailure

string = 'stop': 'continue' | 'stop'

5.82.0+

Определить, продолжить ли загрузку с предположением, что require-trusted-types-for 'script' не была применена, или немедленно прервать загрузку, когда вызов trustedTypes.createPolicy(...) завершится неудачно из-за отсутствия имени политики в списке CSP trusted-types или его дублирования.

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
      onPolicyCreationFailure: 'continue',
    },
  },
};

output.umdNamedDefine

boolean

При использовании libraryTarget: "umd", установка output.umdNamedDefine в true даст имя AMD-модулю в UMD-билде. В противном случае используется анонимный define.

module.exports = {
  //...
  output: {
    umdNamedDefine: true,
  },
};

output.uniqueName

string

Уникальное имя билда webpack для предотвращения конфликтов между несколькими экземплярами webpack при использовании глобальных переменных. По умолчанию устанавливается в имя output.library или имя пакета из package.json в контексте, если оба не найдены, то устанавливается в ''.

output.uniqueName будет использоваться для генерации уникальных глобальных переменных для:

output.chunkLoadingGlobal

webpack.config.js

module.exports = {
  // ...
  output: {
    uniqueName: 'my-package-xyz',
  },
};

output.wasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

Настройка метода загрузки модулей WebAssembly. По умолчанию включены методы 'fetch' (web/WebWorker), 'async-node' (Node.js), но другие могут быть добавлены плагинами.

Значение по умолчанию может меняться в зависимости от разных настроек target:

По умолчанию 'fetch' если target установлено в 'web', 'webworker', 'electron-renderer' или 'node-webkit'.
По умолчанию 'async-node' если target установлено в 'node', 'async-node', 'electron-main' или 'electron-preload'.

module.exports = {
  //...
  output: {
    wasmLoading: 'fetch',
  },
};

output.webassemblyModuleFilename

string = '[hash].module.wasm'

Указывает имя файла модулей WebAssembly. Оно должно быть предоставлено как относительный путь внутри каталога output.path.

module.exports = {
  //...
  output: {
    webassemblyModuleFilename: '[id].[hash].wasm',
  },
};

output.workerChunkLoading

string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal' boolean: false

Новый параметр workerChunkLoading управляет загрузкой фрагментов для worker.

webpack.config.js

module.exports = {
  //...
  output: {
    workerChunkLoading: false,
  },
};

output.workerPublicPath

string

Устанавливает public path для Worker, по умолчанию совпадает со значением output.publicPath. Используйте этот параметр только в том случае, если файлы скриптов worker расположены в другом пути, отличном от других скриптов.

webpack.config.js

module.exports = {
  //...
  output: {
    workerPublicPath: '/workerPublicPath2/',
  },
};

output.workerWasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

Настройка метода загрузки модулей WebAssembly в worker, по умолчанию совпадает со значением output.wasmLoading.

webpack.config.js

module.exports = {
  //...
  output: {
    workerWasmLoading: 'fetch',
  },
};

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