Лучшие плагины Webpack для более быстрой разработки
Сколько раз вы обновляли свой браузер после изменения исходного кода? Сколько раз вы нажалиlocalhost:PORT после открытия браузера? Сколько раз вы забывали, на каком PORT работает ваш текущий сервер, потому что у вас много серверов, работающих на разных портах? Если вы столкнулись с этими и многими другими проблемами развития, это потому, что
Если у нас есть нужные инструменты, разработка становится легкой задачей. В этой статье я собираюсь перечислить несколько плагинов для веб-пакетов, которые я ежедневно использую в своих проектах, чтобы упростить процесс сборки и немного облегчить себе жизнь.
Если вы хотите узнать о веб-пакете и о том, как его настроить в проекте React, вы можете прочитать Еще одно руководство для начинающих по настройке проекта React. Это серия из двух частей, в которой объясняется необходимость JSX, Babel и Webpack. Упомянутые здесь плагины расширят рамки предыдущей статьи, оставаясь при этом полезными по отдельности.
Давайте начнем.
Панель управления Webpack
Как правило, когда вы используете webpack, он выводит результат сборки следующим образом:
Мы не можем понять много вещей из этого текстового заграждения. Кроме того, информация разрознена и представлена непоследовательно и логично. Панель инструментов Webpack призвана изменить это. Установите его с помощью yarn, набрав yarn add -D webpack-dashboard.
Теперь добавьте этот плагин в свой файл webpack.config.js.
Чтобы добавить плагин, мы сначала импортируем плагин, используя require. См. строку 2. Затем мы добавляем его в массив plugins, как делали это в строках 19–21. Чтобы добавить дополнительные плагины, просто продолжайте добавлять их к массиву plugins.
Теперь измените стартовые сценарии. Если вы использовали webpack-dev-server, измените стартовый скрипт с
"scripts": {
"start": "webpack-dev-server index.js"
},
to
"scripts": {
"start": "webpack-dashboard -- webpack-dev-server index.js"
}
Подробнее о -- можно прочитать здесь. Также дополнительные инструкции по настройке приведены здесь.
Теперь, если вы запустите yarn start, вас встретит эта красивая панель управления и внезапно вы станете очень крутым разработчиком :) —
Открыть плагин веб-пакета для браузера
Этот плагин для самых эффективных. После того, как веб-пакет завершит объединение, он автоматически откроет предпочитаемый браузер (или новую вкладку) с предоставленным URL-адресом. Установите его, используя пряжу yarn add -D open-browser-webpack-plugin. Затем добавьте в ключ plugins файла webpack.config.js эту строку —
new OpenBrowserPlugin({ url: 'http://localhost:8080' })
Если вы не хотите устанавливать еще один плагин для этой небольшой задачи, вам повезло. Webpack-dev-server также предоставляет флаг CLI --open, который делает то же самое. Вы можете прочитать об этом здесь".
Анализатор пакетов Webpack
Вы когда-нибудь задумывались, сколько места занимает bundle.js? И какой размер отдельного модуля? Или Сколько всего модулей используется в комплекте? Webpack ведет статистику по этим вещам. Вы можете получить его, запустив webpack —-json > stats.json. Однако, если вы не можете прочитать тысячи строк JSON, вам нужно что-то наглядное. Bundle Analyzer делает именно это. Вы можете увидеть интерактивную масштабируемую карту вашего пакета.
Установите его, используя пряжу yarn add -D webpack-bundle-analyzer. Затем добавьте в ключ plugins файла webpack.config.js эту строку —
new BundleAnalyzerPlugin()
Также проверьте это. Та же концепция, другая визуализация.
Дружеские ошибки
Если в процессе сборки веб-пакета возникает ошибка, вы получите загадочные сообщения об ошибках. Этот плагин призван решить эту проблему. Он распознает определенные классы ошибок веб-пакетов, очищает, объединяет и приоритизирует их, чтобы обеспечить лучший опыт разработчиков.
Вы можете установить его yarn add -D friendly-errors-webpack-plugin и добавить в webpack.config.js. Не забудьте установить для флага quiet веб-пакета значение true. В противном случае вы также получите вывод webpack.
Проверка дубликатов пакетов
Этот плагин предупреждает, когда ваш пакет содержит несколько версий одного и того же пакета. Возможно, некоторые модули могут зависеть от одного и того же пакета, но разных версий. В этом случае будет показано предупреждение. Это поможет вам удалить ненужные модули, которые могут раздуть ваш пакет.
Установите его, запустив yarn add -D duplicate-package-checker-webpack-plugin.
Интересно отметить, что yarn также позволяет устанавливать пакеты только одной версии. Это называется плоская установка.
Игнорировать плагин
Как говорится, этот плагин игнорирует генерацию модулей, которые соответствуют заданному регулярному выражению. Если вы используете momemt.js, файлы локали, то есть файлы, в которых хранится информация о различных часовых поясах, хранятся в основной библиотеке. С помощью плагина ignore вы можете игнорировать некоторые локали, которые не поддерживает ваше приложение. Подробнее об этом можно прочитать в этом выпуске GitHub.
Горячая замена модуля(HMR)
Горячая замена модулей позволяет заменять модули в комплекте без перезагрузки веб-страницы. Замена является динамической и выполняется во время работы приложения. Это позволяет практически мгновенно увидеть изменения, отображаемые на странице. Это может значительно ускорить разработку несколькими способами:
- Состояние приложения сохраняется, поскольку полная перезагрузка страницы не выполняется.
- Время разработки сокращается, так как обновляется только измененная часть, а не все приложение.
- Это также означает, что вы можете писать CSS в своем редакторе и мгновенно видеть изменения.
HMR уже включен в webpack. В webpack-dev-server для его включения используется флаг --hot CLI.
Какие инструменты вы используете для упрощения процесса разработки? Упомяните их в ответах.
Мы всегда ищем талантливых, любознательных людей, чтобы влиться в команду.
Я пишу о JavaScript, веб-разработке и информатике. Подпишитесь на меня, чтобы получать еженедельные статьи.
Свяжитесь со мной в @ Facebook, Linkedin, Twitter.
Первоначально опубликовано на сайте codeburst.io 16 февраля 2018 г. автором Арфатом Салманом
