Spec-Zone.ru › webpack 4

Вывод

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

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'
  }
};

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

webpack.config.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.chunkFilename

string = '[id].js'

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

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

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

webpack.config.js

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

output.chunkLoadTimeout

number = 120000

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

webpack.config.js

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

output.crossOriginLoading

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

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

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

output.jsonpScriptType

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

Позволяет настроить атрибут type тегов script, которые webpack вставляет в DOM для загрузки асинхронных фрагментов.

  • 'text/javascript': Значение по умолчанию type в HTML5 и необходимо для некоторых браузеров в HTML4.
  • 'module': Принуждает обработать код как модуль JavaScript.

output.devtoolFallbackModuleFilenameTemplate

string function (info)

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

См. output.devtoolModuleFilenameTemplate.

output.devtoolLineToLine

boolean = false object: { test string | RegExp, include string | RegExp, exclude string | RegExp}

Избегайте использования этой опции, так как она устарела и вскоре будет удалена.

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

Передайте логическое значение для включения или выключения этой функции для всех модулей (по умолчанию false). Используйте object для точного управления, например, чтобы включить эту функцию для всех файлов JavaScript в определенном каталоге:

webpack.config.js

module.exports = {
  //...
  output: {
    devtoolLineToLine: { test: /\.js$/, include: 'src/utilities' }
  }
};

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.library. Используется для предотвращения столкновений путей к исходным файлам в картах исходных данных при загрузке нескольких библиотек, скомпилированных с помощью webpack.

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

output.filename

string function (chunkData) => 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: '[name].[hash].bundle.js'
  }
};

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

webpack.config.js

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

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

webpack.config.js

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

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

webpack.config.js

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

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

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

Обратите внимание, что эта опция не влияет на выходные файлы для фрагментов, загружаемых по запросу. Для этих файлов используется опция output.chunkFilename. Файлы, созданные загрузчиками, также не затрагиваются. В этом случае вам необходимо попробовать доступные опции конкретного загрузчика.

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

Шаблон Описание

[hash]

Хэш идентификатора модуля

 Хэш идентификатора модуля

[contenthash]

хэш содержимого файла, отличающийся для каждого ресурса

 хэш содержимого файла, отличающийся для каждого ресурса

[chunkhash]

Хэш содержимого чанка

 Хэш содержимого чанка

[name]

Название модуля

 Название модуля

[id]

Идентификатор модуля

 Идентификатор модуля

[query]

Запрос модуля, т.е. строка, следующая за ? в имени файла

 Запрос модуля, т.е. строка, следующая за ? в имени файла

[function]

Функция, которая может возвращать имя файла [строка]

 Функция, которая может возвращать имя файла [ строка ]

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

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

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

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

При использовании ExtractTextWebpackPlugin, используйте [contenthash] для получения хэша извлечённого файла (ни [hash] ни [chunkhash] не работают).

output.globalObject

string = 'window'

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

Например:

webpack.config.js

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

output.hashDigest

string = 'hex'

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

output.hashDigestLength

number = 20

Длина префикса хэш-дайджеста для использования.

output.hashFunction

string = 'md4' function

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

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

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

output.hashSalt

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

output.hotUpdateChunkFilename

string = '[id].[hash].hot-update.js' function (chunkData) => string

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

Здесь разрешены только плейсхолдеры [id] и [hash], по умолчанию:

webpack.config.js

module.exports = {
  //...
  output: {
    hotUpdateChunkFilename: (chunkData) => {
      return `${chunkData.chunk.name === 'main' ? '' : '[name]/'}[id].[hash].hot-update.js`;
    }
  }
};

Обычно менять output.hotUpdateChunkFilename не нужно.

output.hotUpdateFunction

string

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

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

Подробности см. в output.jsonpFunction.

output.hotUpdateMainFilename

string = '[hash].hot-update.json' function

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

Обычно менять output.hotUpdateMainFilename не нужно.

output.jsonpFunction

string = 'webpackJsonp'

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

Имя функции JSONP, используемой для асинхронной загрузки чанков или объединения нескольких начальных чанков (SplitChunksPlugin, AggressiveSplittingPlugin).

Если используется параметр output.library, имя библиотеки автоматически конкатенируется со значением output.jsonpFunction.

Если на одной веб-странице используются несколько запусков webpack (из разных компиляций), существует риск конфликтов запрошенных чанков в глобальном пространстве имён.

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

example-on-demand-chunk.js

(window.webpackJsonp = window.webpackJsonp || []).push(/* ... */);

Измените output.jsonpFunction для безопасного использования нескольких запусков webpack на одной веб-странице:

webpack.config.flight-widget.js

module.exports = {
  //...
  output: {
    jsonpFunction: 'wpJsonpFlightsWidget'
  }
};

Содержимое запрошенных чанков теперь изменится на:

example-on-demand-chunk.js

(window.wpJsonpFlightsWidget = window.wpJsonpFlightsWidget || []).push(/* ... */);

output.library

string object

Может быть передан object начиная с webpack 3.1.0. Эффективно для libraryTarget: 'umd'.

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

webpack.config.js

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

Переменная MyLibrary будет связана со значением, возвращаемым вашим входным файлом, если результирующий вывод включён в виде тега script на странице HTML.

Обратите внимание, что если в качестве точки входа предоставлен array в виде массива, только последний модуль в массиве будет экспортирован. Если предоставлен entry в виде объекта, его можно экспортировать, используя синтаксис object (см. пример для получения более подробной информации).

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

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. В следующих примерах предполагается, что это значение настроено как MyLibrary.

Обратите внимание, что _entry_return_ в приведённом ниже коде примера — это значение, возвращаемое точкой входа. В самом пакете это результат работы функции, сгенерированной webpack из точки входа.

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

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

libraryTarget: 'var' - (по умолчанию) При загрузке вашей библиотеки значение, возвращаемое точкой входа, будет назначено переменной:

var MyLibrary = _entry_return_;

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

При использовании этого параметра пустой output.library приведёт к отсутствию назначения.

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

MyLibrary = _entry_return_;

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

При использовании этого параметра пустой output.library приведёт к повреждению пакета вывода.

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

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

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

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

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

libraryTarget: "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: 'commonjs2' — значение возвращаемое вашей точкой входа будет присвоено module.exports. Как следует из названия, это используется в средах CommonJS:

module.exports = _entry_return_;

require('MyLibrary').doSomething();

Обратите внимание, что output.library опущено, поэтому оно не требуется для этого конкретного output.libraryTarget.

Интересуетесь различием между CommonJS и CommonJS2? Хотя они похожи, между ними есть некоторые тонкие различия, которые обычно не важны в контексте webpack. (Для получения более подробной информации, пожалуйста, прочитайте этот вопрос.)

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() {
      // ...
    },
  };
});

Библиотека для проверки модулей.

Другие цели

libraryTarget: 'jsonp' — это обернёт возвращаемое значение вашей точки входа в оболочку jsonp.

MyLibrary(_entry_return_);

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

output.path

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

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

webpack.config.js

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

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

output.pathinfo

boolean

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

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

webpack.config.js

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

Он также добавляет некоторую информацию о удалении лишнего кода в сгенерированную сборку.

output.publicPath

string = '' function

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

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

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

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

webpack.config.js

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, используя её для определения места предоставления файлов вывода.

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

Примеры:

module.exports = {
  //...
  output: {
    // One of the below
    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.sourceMapFilename

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

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

Замены [name], [id], [hash] и [chunkhash] из output.filename могут быть использованы. В дополнение к ним вы можете использовать замены, перечисленные ниже. Заполнитель [file] заменяется именем файла исходного файла. Мы рекомендуем использовать только заполнитель [file], так как другие плейсхолдеры не будут работать при генерации карт исходного кода для файлов, не являющихся фрагментами.

Шаблон Описание

[file]

Имя файла модуля

 Имя файла модуля

[filebase]

Имена файла модуля basename

 Имена файла модуля basename

output.sourcePrefix

string = ''

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

webpack.config.js

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

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

Обычно вам не нужно изменять output.sourcePrefix.

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.umdNamedDefine

boolean

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

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

output.futureEmitAssets

boolean = false

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

Опция output.futureEmitAssets будет удалена в webpack v5.0.0, и это поведение станет новым по умолчанию.

module.exports = {
  //...
  output: {
    futureEmitAssets: true
  }
};

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API