Нужно создать собственный плагин или загрузчик Webpack 2? Не знаете как и с чего начать? Я расскажу о быстрой настройке, чтобы вы могли начать создавать плагины, какие душе угодно! Вы можете увидеть полные результаты в github repo.
Это кому?
Вы знаете javascript и у вас есть идея для плагина или загрузчика.
Настройка отладки
Я покажу вам, как отлаживать систему на узле ›= 6.3.0. Причина в том, что я буду работать с флагом --inspect, который делает отладку быстрой и легкой. Если вы знаете, как отлаживать узел через node-inspector или любой другой отладчик, можете продолжать. Опять же, мои примеры будут для узла ›= 6.3.0. Я предлагаю обновиться, потому что, по моему опыту, отладка с помощью --inspect выполняется намного быстрее, чем с node-inspector.
Отлично, теперь давайте установим V8 inspector для Google Chrome. V8 inspector создает уникальный URL-адрес для отладки при каждом запуске. Плагин позволяет вам нажать кнопку, чтобы перейти к правильному URL-адресу, не копируя каждый раз.
Я добавил крученый флаг --debug-brk. Он говорит узлу прекратить отладку по первой команде. В противном случае он выполнит весь скрипт. Без него быстрый скрипт может выйти до того, как вы сможете подключить отладчик.
Делаем загрузчик
Загрузчик прочитает команды require или import и запустит присоединенный загрузчик. Мы сообщаем Webpack, какой загрузчик запускать, с помощью клавиши test. Давайте посмотрим на пример.
В приведенном выше примере мы говорим Webpack запустить загрузчик coolio-loader, если он когда-либо встретит файл с расширением gangstas_paradise. При желании можно указать ключи include или exclude с путями (include: './pennsylvania'). Простое включение загрузчика не вызовет coolio-loader. Где-то в коде должен быть require или import файл с .gangstas_paradise. Обратите внимание, как я добавил json-loader перед coolio-loader. Это связано с тем, что Webpack идет справа налево, поэтому вывод coolio-loader переходит в json-loader.
По умолчанию Webpack будет искать указанный загрузчик в папке node_modules. К счастью, Webpack позволяет нам объявить объект resolveLoader, где мы можем указать, где искать загрузчики. Выше я добавил объект resolveLoader с каталогом my-loaders. Это позволяет мне иметь пользовательские, неопубликованные загрузчики. Отлично подходит для развития!
Файл coolio-loader.js находится в каталоге my-loaders и выглядит следующим образом:
Загрузчик должен вернуть буфер, иначе вы получите ошибку. В моем примере я возвращаю объект JSON. Я вывожу несколько интересных переменных, которые вам могут понадобиться. После завершения настройки выполните следующую команду и откройте вкладку для файла V8 debugger.
Когда окно загрузит отладчик, нажмите кнопку воспроизведения, чтобы начать выполнение. Подождите секунду, и отладчик дойдет до файла coolio-loader.js и остановится на строке отладчика. Теперь вы можете отлаживать и делать все, что душе угодно. Здесь я оставляю вас наедине с вашей работой. Иди загрузи что-нибудь прямо сейчас!
Создание плагина
Плагин настроить проще, чем загрузчик. Я следовал примерам со страницы плагинов Webpack.
Все, что было изменено, это добавление массива plugins. Просто запросите модуль и добавьте его в массив plugins. Вы определяете, что ваш конструктор принимает или нуждается.
Настроив обе вещи, запустите команду node и подключитесь к ней через расширение.
Обратите внимание, что плагины запускаются перед резолверами. Теперь вы готовы сделать любой плагин или загрузчик. Когда вы закончите, вы можете загрузить свои плагины в npm или нет. Только не забудьте удалить все отладчики.
Ресурсы
- Пример репо для этого поста
- Как сделать плагин
- Как сделать загрузчик
- Предыдущая ссылка: Как сделать загрузчик
Вывод
После всего этого вы сможете начать создавать свои собственные загрузчики и плагины. Кроме того, вы также можете отлаживать любое приложение узла. Во флаге --inspect нет ничего особенного, кроме версии узла. Удачного взлома!
