Как разработать плагин для веб-пакетов

После предыдущего введенияКак разработать загрузчики веб-пакетовПозже. Куй железо, пока горячо, давайте продолжим рассмотрение другого основного компонента webpack: плагина.
Далее тоже самое что и загрузчик, начнем с основногоофициальная документацияНачать искать.

Разница между загрузчиком и плагином

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

Как разработать плагин

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

разработать плагин

Плагин webpack состоит из следующих аспектов:

• неанонимная функция js
• определить метод применения на его объекте-прототипе
• Указывает событие перехватчика веб-пакета, которое монтируется
• Манипулировать конкретными данными о внутренних компонентах веб-пакета
• Обратный вызов, предоставляемый веб-пакетом, когда метод завершается

  // A named JavaScript function.
  function MyExampleWebpackPlugin() {
   //
  };
  // Defines `apply` method in it's prototype.
  MyExampleWebpackPlugin.prototype.apply = function(compiler) {
  // Specifies webpack's event hook to attach itself.
  compiler.plugin('webpacksEventHook', function(compilation /* Manipulates webpack internal instance specific data. */, callback) {
    console.log("This is an example plugin!!!");
    // Invokes webpack provided callback after functionality is complete.
    callback();
  });
  };

  Компилятор и компиляция

Двумя наиболее важными объектами в процессе разработки плагина являются компилятор и компилятор. Понимание их обязанностей — самый важный первый шаг в расширении функциональности webpack.

Объект компилятора — это полная среда настройки для webpack. Этот объект создается, как только начинается выполнение веб-пакета, и для него устанавливаются все рабочие параметры, такие как параметры, загрузчики и плагины. При применении плагина в среде webpack плагин получит ссылку на компилятор. Используйте этот компилятор для доступа к основной среде веб-пакета.

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

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

• Compiler Source
• Compilation Source

Базовая структура плагина

Плагины — это экземпляры объектов с методом применения в прототипе, который вызывается веб-пакетом один раз при установке плагина. Метод применения предоставляет ссылку на текущий активный компилятор веб-пакета, что позволяет получить доступ к обратным вызовам компилятора. Простая структура плагина выглядит следующим образом:

function HelloWorldPlugin(options) {
  // Setup the plugin instance with options...
}

HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function() {
    console.log('Hello World!');
  });
};

module.exports = HelloWorldPlugin;

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

var HelloWorldPlugin = require('hello-world');

var webpackConfig = {
  // ... config settings here ...
  plugins: [
    new HelloWorldPlugin({options: true})
  ]
};

доступ к компиляции

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

function HelloCompilationPlugin(options) {}

HelloCompilationPlugin.prototype.apply = function(compiler) {

  // Setup callback for accessing a compilation:
  compiler.plugin("compilation", function(compilation) {

    // Now setup callbacks for accessing compilation steps:
    compilation.plugin("optimize", function() {
      console.log("Assets are being optimized.");
    });
  });
};

module.exports = HelloCompilationPlugin;

Если вы хотите узнать больше о компиляторе, о том, какие обратные вызовы доступны во время компиляции и некоторых других более важных объектах, нажмитедокументация к плагину

Асинхронный плагин

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

function HelloAsyncPlugin(options) {}

HelloAsyncPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {

    // Do something async...
    setTimeout(function() {
      console.log("Done with async work...");
      callback();
    }, 1000);

  });
};

module.exports = HelloAsyncPlugin;

Пример

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

Давайте напишем простой образец плагина, цель которого — сгенерировать новое имя для файлов, которые filelist.md. Содержание следующее: список всех сгенерированных файлов в процессе сборки. Этот плагин о следующем:

function FileListPlugin(options) {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin('emit', function(compilation, callback) {
    // Create a header string for the generated file:
    var filelist = 'In this build:\n\n';

    // Loop through all compiled assets,
    // adding a new line item for each filename.
    for (var filename in compilation.assets) {
      filelist += ('- '+ filename +'\n');
    }

    // Insert this list into the webpack build as a new file asset:
    compilation.assets['filelist.md'] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();
  });
};

module.exports = FileListPlugin;

Различные типы плагинов

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

тип синхронизации

Экземпляры этого типа используют следующие методы для вызова плагинов.

applyPlugins(name: string, args: any...)

applyPluginsBailResult(name: string, args: any...)

Это означает, что обратный вызов каждого плагина будет вызываться по очереди с определенными аргументами args. Это самый простой формат для плагинов. Ожидается, что многие полезные события, такие как "compile", "this-compilation", будут выполняться плагином синхронно.

тип потока

Плагины водопада вызываются следующим образом

applyPluginsWaterfall(name: string, init: any, args: any...)

Асинхронный тип

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

applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)

Метод управления плагином вызывается со всеми аргументами и обратным вызовом с этим флагом (err?: Error) -> void. Методы обработчика вызываются в том порядке, в котором вызываются зарегистрированные обратные вызовы после вызова всех обработчиков. Это очень распространенный шаблон для событий "испускание", "запуск".

Асинхронный поток

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

applyPluginsAsyncWaterfall(name: string, init: any, callback: (err: Error, result: any) -> void)

Обработчик этого плагина вызывается с текущим значением и обратным вызовом с этим флагом (err?: Error) -> void. При вызове nextValue является текущим значением следующего обработчика. Текущее значение первого обработчика — init. После вызова всех обработчиков обратному вызову будет присвоено последнее значение. Если какой-либо обработчик передает значение ошибки, обратный вызов примет ошибку, и никакие другие обработчики вызываться не будут. Этот режим плагина используется с такими событиями, как «до разрешения» и «после разрешения».

Асинхронная серия

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

applyPluginsAsyncSeries(name: string, args: any..., callback: (err: Error, result: any) -> void)

заключительные замечания

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