Список плагинов

config

NormalModuleReplacementPlugin

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)

Заменяет ресурсы, соответствующие resourceRegExp на newResource. Если newResource является относительным, то оно разрешается относительно предыдущего ресурса. Если newResource является функцией, ожидается, что она перезапишет атрибут ‘request’ переданного объекта.

ContextReplacementPlugin

new webpack.ContextReplacementPlugin(
                resourceRegExp, 
                [newContentResource],
                [newContentRecursive],
                [newContentRegExp])

Если ресурс (каталог) соответствует resourceRegExp, плагин заменяет стандартный ресурс, рекурсивный флаг или regExp, сгенерированный при разборе, соответственно на newContentResource, newContentRecursive или newContextRegExp. Если newContentResource является относительным, то оно разрешается относительно предыдущего ресурса. Если newContentResource является функцией, ожидается, что она перезапишет атрибут ‘request’ переданного объекта.

IgnorePlugin

new webpack.IgnorePlugin(requestRegExp, [contextRegExp])

Не генерировать модули для запросов, соответствующих указанному regExp.

• requestRegExp RegEx для проверки запроса.
• contextRegExp (необязательно) RegEx для проверки контекста (каталога).

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Запрос на обычный модуль, который разрешается и строится даже до того, как произойдёт require к нему. Это может повысить производительность. Сначала попробуйте проанализировать процесс сборки, чтобы определить эффективные точки для предварительной загрузки.

context абсолютный путь к каталогу

request строка запроса для обычного модуля

ResolverPlugin

new webpack.ResolverPlugin(plugins, [types])

Применить плагин (или массив плагинов plugins) к одному или нескольким резолверам (как указано в types).

plugins плагин или массив плагинов, которые должны быть применены к резолверу(ам).

types тип резолвера или массив типов резолверов (по умолчанию: ["normal"], типы резолверов: normal, context, loader).

Все плагины из enhanced-resolve экспортируются как свойства для ResolverPlugin.

Пример:

new webpack.ResolverPlugin([
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"])

ResolverPlugin.FileAppendPlugin

Этот плагин добавит путь к каталогу модулей для поиска соответствия, что может быть полезно, если у вас есть модуль с неправильным значением «main» в package.json/bower.json и т. д. (например, "main": "Gruntfile.js"). Вы можете использовать этот плагин в качестве специального случая для загрузки правильного файла для этого модуля. Пример:

new webpack.ResolverPlugin([
  new webpack.ResolverPlugin.FileAppendPlugin(['/dist/compiled-moduled.js'])
])

EnvironmentPlugin

Этот плагин позволит вам ссылаться на переменные среды через process.env

new webpack.EnvironmentPlugin([
  "NODE_ENV"
])

В вашем коде:

var env = process.env.NODE_ENV;

output

BannerPlugin

new webpack.BannerPlugin(banner, options)

Добавляет баннер в начало каждого сгенерированного фрагмента.

banner строка, она будет заключена в комментарий

options.raw если true, баннер не будет заключён в комментарий

options.entryOnly если true, баннер будет добавлен только к входным фрагментам.

optimize

DedupePlugin

new webpack.optimize.DedupePlugin()

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

Это никак не изменяет семантику модуля. Не ожидайте решения проблем с несколькими экземплярами модулей. После дедупликации они не будут одним экземпляром.

Примечание: Не используйте в режиме наблюдения. Только для производственных сборок.

LimitChunkCountPlugin

new webpack.optimize.LimitChunkCountPlugin(options)

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

options.maxChunks (число) максимальное количество фрагментов

options.chunkOverhead (число) дополнительная нагрузка на каждый фрагмент в байтах (по умолчанию 10000, чтобы отразить задержку запроса)

options.entryChunkMultiplicator (число) множитель для входных фрагментов (по умолчанию 10, входные фрагменты объединяются в 10 раз реже)

MinChunkSizePlugin

new webpack.optimize.MinChunkSizePlugin(options)

Объединяет небольшие фрагменты, размер которых меньше указанного минимума (в символах). Размер приблизительный.

options.minChunkSize (число) фрагменты, меньшие этого значения, будут объединены

OccurrenceOrderPlugin

new webpack.optimize.OccurrenceOrderPlugin(preferEntry)

Присваивает идентификаторы модулям и фрагментам по количеству вхождений. Часто используемые идентификаторы получают более низкие (короткие) идентификаторы. Это делает идентификаторы предсказуемыми, уменьшает общий размер файла и рекомендуется.

preferEntry (логическое значение) присваивает входным фрагментам более высокий приоритет. Это делает входные фрагменты меньше, но увеличивает общий размер. (рекомендуется)

UglifyJsPlugin

new webpack.optimize.UglifyJsPlugin([options])

Минимизирует весь JavaScript-выход фрагментов. Загрузчики переключаются в режим минимизации. Вы можете передать объект, содержащий опции UglifyJS.

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

Опции UglifyJS:

• compress (boolean|object): опции для сжатия UglifyJS, которое включено по умолчанию — см. Compressor исходный код для опций и значений по умолчанию.

  Используйте compress: false для явного отключения сжатия.

• mangle (boolean|object): опции для изменения имён переменных UglifyJS, включённые по умолчанию — см. _default_mangler_options в исходном коде UglifyJS для опций и значений по умолчанию.

  Используйте mangle: false для явного отключения изменения имён.

• mangle.props (boolean|object): передача true или объекта включает и предоставляет опции для изменения имён свойств UglifyJS — см. документацию UglifyJS для mangleProperties для опций.

  Примечание: в документации UglifyJS предупреждают, что вы, вероятно, сломаете свой исходный код, если используете изменение имён свойств, поэтому, если вы не уверены, почему вам нужна эта функция, вы, скорее всего, не должны её использовать!

• output: объект, предоставляющий опции для OutputStream UglifyJS — см. OutputStream исходный код для опций и значений по умолчанию.

Дополнительные опции:

• beautify (boolean): задайте true для включения форматирования вывода UglifyJS.

  Если конфигурация beautify также указана в объекте output , она переопределит эту конфигурацию.

• comments (boolean|RegExp|function(astNode, comment) -> boolean): настроить сохранение комментариев в выводе.

  По умолчанию сохраняются комментарии, содержащие /*!, /**!, @preserve или @license.

  Если конфигурация comments также указана в объекте output , она переопределит эту конфигурацию.

• sourceMap (boolean): использование SourceMaps для сопоставления мест сообщений об ошибках с модулями. Это замедляет компиляцию. (по умолчанию: true)

• test, include, exclude (RegExp|Array<RegExp>): настроить фильтрацию обработанных файлов (по умолчанию: test: /\.js($|\?)/i)

Конфигурация изменения имён

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

new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})

При этом плагин не будет изменять имя любого вхождения $super, $, exports или require.

ngAnnotatePlugin

new ngAnnotatePlugin([options]);

Запускает предсжимающий модуль ng-annotate для вставки аннотаций инъекции зависимостей AngularJS.

CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin(options)

• options.name или options.names (string|string[]): Имя фрагмента общего фрагмента. Существующий фрагмент можно выбрать, передав имя существующего фрагмента. Если передаётся массив строк, это эквивалентно вызову плагина несколько раз для каждого имени фрагмента. Если опущено и options.async или options.children установлены, используются все фрагменты, в противном случае используется options.filename в качестве имени фрагмента.
• options.filename (string): Шаблон имени файла для общего фрагмента. Может содержать те же заполнитель, что и output.filename. Если опущено, имя исходного файла не изменяется (обычно output.filename или output.chunkFilename).
• options.minChunks (number|Infinity|function(module, count) -> boolean): Минимальное количество фрагментов, содержащих модуль, необходимое для перемещения в общий фрагмент. Число должно быть больше или равно 2 и меньше или равно количеству фрагментов. Передача Infinity просто создаёт общий фрагмент, но не перемещает в него никакие модули. Передавая function, вы можете добавить пользовательскую логику. (По умолчанию соответствует количеству фрагментов)
• options.chunks (string[]): Выбор исходных фрагментов по именам фрагментов. Фрагмент должен быть потомком общего фрагмента. Если опущено, выбираются все входные фрагменты.
• options.children (boolean): Если true, все дочерние фрагменты общего фрагмента выбираются.
• options.async (boolean|string): Если true, создаётся новый асинхронный общий фрагмент как потомок options.name и сосед options.chunks. Он загружается параллельно с options.chunks. Можно изменить имя выходного файла, указав желаемую строку вместо true.
• options.minSize (number): Минимальный размер всех общих модулей перед созданием общего фрагмента.

Примеры:

1. Общий фрагмент для входных точек

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

new CommonsChunkPlugin({
  name: "commons",
  // (the commons chunk name)

  filename: "commons.js",
  // (the filename of the commons chunk)

  // minChunks: 3,
  // (Modules must be shared between 3 entries)

  // chunks: ["pageA", "pageB"],
  // (Only use these entries)
})

Вы должны загрузить сгенерированный фрагмент перед входной точкой:

<script src="commons.js" charset="utf-8"></script>
<script src="entry.bundle.js" charset="utf-8"></script>

2. Явный фрагмент vendor

Разделите свой код на vendor и приложение.

entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
}
new CommonsChunkPlugin({
  name: "vendor",

  // filename: "vendor.js"
  // (Give the chunk a different name)

  minChunks: Infinity,
  // (with more entries, this ensures that no other module
  //  goes into the vendor chunk)
})

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

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

3. Переместить общие модули в родительский чанк

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

new CommonsChunkPlugin({
  // names: ["app", "subPageA"]
  // (choose the chunks, or omit for all chunks)

  children: true,
  // (select all children of chosen chunks)

  // minChunks: 3,
  // (3 children must share the module before it's moved)
})

4. Дополнительный асинхронный чанк общих модулей

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

new CommonsChunkPlugin({
  // names: ["app", "subPageA"]
  // (choose the chunks, or omit for all chunks)

  children: true,
  // (use all children of the chunk)

  async: true,
  // (create an async commons chunk)

  // minChunks: 3,
  // (3 children must share the module before it's separated)
})

AggressiveMergingPlugin

new webpack.optimize.AggressiveMergingPlugin(options)

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

options.minSizeReduce Фактор, определяющий минимальное необходимое уменьшение размера для слияния чанков. По умолчанию 1.5, что означает, что общий размер должен уменьшиться на 50% для слияния чанков.

options.moveToParents При установке модули, которые не присутствуют в обоих сливаемых чанках, перемещаются во все родительские чанки. По умолчанию false.

options.entryChunkMultiplicator При установке options.moveToParents, перемещение в чанк входа является более затратным. По умолчанию 10, что означает, что перемещение в чанк входа в десять раз дороже, чем перемещение в обычный чанк.

DllPlugin

Выходные «dll» пакеты. Dll пакеты не выполняют код ваших модулей. Они только включают модули. Dll пакет экспортирует функцию, которую можно использовать для «require» модулей по идентификатору (внутренняя функция require). Кроме того, в указанное место записывается файл manifest.json, содержащий сопоставления от реального запроса к идентификатору модуля.

Комбинируйте этот плагин с output.library опцией, чтобы экспортировать функцию dll, например, в глобальную область видимости.

new DllPlugin({
  path: path.join(__dirname, "manifest.json"),
  name: "[name]_[hash]",
  context: __dirname
})

• path: полный путь к файлу manifest.json (выход)
• name: имя экспортируемой функции dll (сохраняйте согласованность с output.library)
• context (необязательно): контекст запросов в файле manifest, по умолчанию контекст webpack

Пример использования

DllReferencePlugin

Ссылается на функцию dll, которая должна быть доступна. Файл manifest может быть использован для сопоставления имён с идентификаторами модулей, доступными через эту функцию dll.

Может использоваться для потребления dll пакета + manifest, созданного плагином DllPlugin.

Может использоваться в двух разных режимах:

Режим области видимости

Содержание dll доступно под префиксом модуля. Например, с scope = "xyz" файл abc в dll можно получить через require("xyz/abc").

Режим сопоставления

Содержание dll сопоставляется с текущей директорией. Если запрашиваемый файл соответствует файлу в dll (после разрешения), то используется файл из dll. Примечание: так как это происходит после разрешения, каждый файл в dll должен быть также доступен пользователю dll по тому же пути. Например, если dll содержит jquery и файл abc, require("jquery") и require("./abc") будут использованы из dll.

new DllReferencePlugin({
  context: __dirname,
  scope: "xyz",
  manifest: require("./manifest.json"),
  name: "./my-dll.js",
  sourceType: "commonsjs2",
  content: { ... }
})

• context: (полный путь) контекст запросов в manifest (или свойство content)
• scope (необязательно): префикс, используемый для доступа к содержимому dll
• manifest (объект): объект, содержащий content и name
• name (необязательно): имя, где dll экспортирован (по умолчанию manifest.name) (см. также externals)
• sourceType (необязательно): тип экспорта dll (по умолчанию "var") (см. также externals)
• content (необязательно): сопоставления запроса с идентификатором модуля (по умолчанию manifest.content)

Пример использования

Использование dll через тэги <script>

Пакет dll: output.library = "[name]_[hash]" output.libraryTarget = "var" DllPlugin.name = "[name]_[hash]"

Потребитель dll: DllReferencePlugin.sourceType = "var"

Использование dll через node.js

Пакет dll: output.libraryTarget = "commonjs2"

Потребитель dll: DllReferencePlugin.sourceType = "commonjs2" DllReferencePlugin.name = "./path/to/dll.js"

AppCachePlugin

Генерирует манифест кэша приложения HTML5

OfflinePlugin

Плагин, который добавляет поддержку офлайн в ваш проект. Он генерирует ServiceWorker на основе выходных файлов и выбранной стратегии обновления. AppCache используется как резервный вариант, когда ServiceWorker недоступен.

SWPrecacheWebpackPlugin

Используйте сервис-воркер для кэширования всех ваших выходных ресурсов пакетов. Этот плагин сгенерирует файл сервис-воркера с использованием sw-precache и добавит его в вашу директорию сборки. Вы можете необязательно передать собственные конфигурационные параметры sw-precache.

ImageminPlugin

Сжимает и оптимизирует ваши изображения с помощью Imagemin. В отличие от image-webpack-loader, этот плагин также оптимизирует изображения из плагинов, таких как favicons-webpack-plugin.

модули стилей

LabeledModulesPlugin

new webpack.dependencies.LabeledModulesPlugin()

Поддержка меченых модулей.

AngularPlugin

Использование модулей angular.js с webpack.

инъекция зависимостей

DefinePlugin

new webpack.DefinePlugin(definitions)

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

Пример:

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

Каждый ключ, переданный в DefinePlugin, является идентификатором или несколькими идентификаторами, соединёнными с ..

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

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

Пример:

if (!PRODUCTION)
    console.log('Debug info')
if (PRODUCTION)
    console.log('Production log')
``

После прохождения через webpack без минимизации результат:

if (!true)
    console.log('Debug info')
if (true)
    console.log('Production log')
``

а затем после прохода минимизации результат:

console.log('Production log')
``

ProvidePlugin

new webpack.ProvidePlugin(definitions)

Автоматически загружаемые модули. Модуль (значение) загружается, когда идентификатор (ключ) используется как свободная переменная в модуле. Идентификатор заполняется экспортом загруженного модуля.

Пример:

new webpack.ProvidePlugin({
    $: "jquery"
})

// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"

RewirePlugin

Использование rewire в webpack.

NgRequirePlugin

Автоматическое подключение модулей AngularJS без явного написания require оператора.

{
  plugins: [
    new ngRequirePlugin(['file path list for your angular modules. eg: src/**/*.js'])
  ]
}

Локализация

I18nPlugin

new I18nPlugin(translations: Object, fnName = "__": String)

Создание пакетов с встроенными переводами. Затем вы можете предоставить переведённый пакет своим клиентам.

Отладка

SourceMapDevToolPlugin

new webpack.SourceMapDevToolPlugin({
  // asset matching
  test: string | RegExp | Array,
  include: string | RegExp | Array,
  exclude: string | RegExp | Array,

  // file and reference
  filename: string,
  append: false | string,

  // sources naming
  moduleFilenameTemplate: string,
  fallbackModuleFilenameTemplate: string,

  // quality/performance
  module: bool,
  columns: bool,
  lineToLine: bool | object
})

Добавляет SourceMaps для ресурсов.

test, include и exclude используются для определения ресурсов, которые должны быть обработаны. Каждый из них может быть регулярным выражением (сопоставляется имя файла ресурса), строкой (имя файла ресурса должно начинаться с этой строки) или массивом этих элементов (любой из них должен быть сопоставлен). test по умолчанию соответствует файлам .js если не указано иначе.

filename определяет выходное имя SourceMap. Если значение не указано, SourceMap встраивается.

append добавляется к исходному ресурсу. Обычно это #sourceMappingURL комментарий. [url] заменяется URL-адресом файла SourceMap. false отключает добавление.

moduleFilenameTemplate и fallbackModuleFilenameTemplate см. output.devtoolModuleFilenameTemplate.

module (по умолчанию true) Когда загрузчики false не генерируют SourceMaps и вместо этого используется преобразованный код.

columns (по умолчанию true) Когда столбцовые сопоставления в SourceMaps игнорируются и используется более быстрая реализация SourceMap.

lineToLine (объект {test, include, exclude}, который сопоставляется с модулями) сопоставленные модули используют простые (более быстрые) линейные сопоставления строк и столбцов.

Другое

HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

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

Генерирует горячие обновляемые фрагменты каждого фрагмента в записях. Также включает API и делает __webpack_hash__ доступным в пакете.

ExtendedAPIPlugin

new webpack.ExtendedAPIPlugin()

Добавляет полезные свободные переменные в пакет.

__webpack_hash__ Хэш компиляции доступен как свободная переменная.

ПРЕДУПРЕЖДЕНИЕ: Не комбинируйте его с HotModuleReplacementPlugin. Это вызовет ошибку, и вам не нужно, так как HotModuleReplacementPlugin экспортирует то же самое.

NoErrorsPlugin

new webpack.NoErrorsPlugin()

При возникновении ошибок во время компиляции этот плагин пропускает фазу вывода (и фазу записи), поэтому не создаются какие-либо активы, содержащие ошибки. Флаг emitted в статистике равен false для всех активов. Если вы используете командную строку, процесс webpack не завершится с кодом ошибки, включив этот плагин. Если вы хотите, чтобы webpack «ошибся» при использовании командной строки, ознакомьтесь с параметром bail.

ProgressPlugin

new webpack.ProgressPlugin(function handler(percentage, msg) {/* ... */})

Включается в компилятор для извлечения информации о прогрессе. handler должен иметь сигнатуру function(percentage, message). Вызывается с 0 <= percentage <= 1. percentage == 0 указывает начало. percentage == 1 указывает конец.

WatchIgnorePlugin

new webpack.WatchIgnorePlugin(paths)

Не отслеживает указанные файлы, соответствующие предоставленным путям или RegExps.

• paths (массив) массив RegExps или абсолютных путей к каталогам или файлам для проверки

HtmlWebpackPlugin

HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({ title: 'Webpack App' })

Генерирует базовую HTML-страницу для вашего веб-приложения со всеми сгенерированными webpack css и js файлами. Поддерживает пользовательские шаблоны, favicon, минификацию HTML и многое другое:

StaticSiteGeneratorWebpackPlugin

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

var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
var paths = [ '/', '/blog/', '/blog/hello-world/', ... ];

entry: {
  'static-render': './static-render.js'
},
output: {
  filename: 'static-render.js',
  path: 'dist',
  /* You must compile to UMD or CommonJS
   * so it can be required in a Node context: */
  libraryTarget: 'umd'
},
plugins: [
  new StaticSiteGeneratorPlugin('static-render', paths)
]

S3Plugin

S3Plugin = require('webpack-s3-plugin')
new S3Plugin({
  exclude: RegExp,
  s3Options: {
    accessKeyId: string,
    secretAccessKey: string,
    region: string
  },
  s3UploadOptions: {
    Bucket: string
  },
  cdnizerOptions: {
    defaultCDNBase: string
  }
})

Загружает ваше содержимое в s3. Также может запускать ваши HTML-файлы через cdnizer для изменения URL для соответствия.

BellOnBundlerErrorPlugin

var BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin')

{
plugins: [
  new BellOnBundlerErrorPlugin()
  ]
}

Получает уведомление об ошибках сборки бандлера. В этом случае символ колокольчика будет записан в вывод STDERR.

WebpackShellPlugin

const WebpackShellPlugin = require('webpack-shell-plugin');

var plugins = [];
{
  plugins: [
    new WebpackShellPlugin({
      onBuildStart: ['echo "Starting"'],
      onBuildEnd: ['python pi.py', 'node openBrowser.js', 'haxe game.hx && ssh -i /myPems/key.pem BObama@healthcare.gov']
    })
  ]
}

Выполняет командные файлы оболочки до и после сборки webpack. Отлично подходит для отчетов, тестирования или открытия браузера для разработки. Узнайте больше.

WebpackAngularResourcePlugin

In the entry point where the main AngularJS module is defined:

var angularResourceUtil = require('webpack-angular-resource-plugin');

Require all css files under the current directory and its subdirectories:

var styleContext = require.context(".", true, /.css$/);

angularResourceUtil.requireAll(styleContext);

Define the main Angular module. Also require all files whose name end with .controller.js which contain submodules. Notice that the module names are returned as an array and passed to the factory method as dependencies of the main module:

var controllerContext = require.context('.', true, /\.controller\.js$/)

module.exports = {
    default:angular.module('app', angularResourceUtil.requireAll(controllerContext))
}

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

WebpackBrowserPlugin

const WebpackBrowserPlugin = require('webpack-browser-plugin');

var plugins = [];
{
  plugins: [
    new WebpackBrowserPlugin();
  ]
}

Автоматически открывает браузер для вашего приложения после завершения webpack или webpack-dev-server. Если используется webpack, для запуска вашей сборки используется browser-sync. Узнайте больше.

FaviconsWebpackPlugin

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

var plugins = [];
{
  plugins: [
    new FaviconsWebpackPlugin('my-logo.png')
  ]
}

Автоматически генерирует более 30 значков закладок (настраиваемых) для Android, iOS и различных браузеров настольных компьютеров из одного исходного изображения png. Хорошо интегрируется с плагином html-webpack.

WebpackPluginGraphqlSchemaHot

const path = require('path');
const WebpackPluginGraphqlSchemaHot = require('webpack-plugin-graphql-schema-hot');

var plugins = [];
{
  plugins: [
    new WebpackPluginGraphqlSchemaHot({
      schemaPath: path.resolve(__dirname, '../schema/index.js'),
      output: {
        json: path.resolve(__dirname, '../build/schema.graphql.json'),
        txt: path.resolve(__dirname, '../build/schema.graphql.txt'),
      },
      runOnStart: true,
      verbose: true,
      hideErrors: false,
    }),
  ]
}

Этот плагин отслеживает изменения в вашей GraphQL-схеме и генерирует её интроспекцию в форматах json и txt.