Насколько хорошо необходимо знать Webpack и Gulp в web-разработке?

С react используется webpack в подавляющем большинстве случаев. Есть тонна готовых конфигов, которые можно просто скопипастить и все будет работать. Но в целом - в проекте вам может понадобится сделать что-то по другому и тогда возникают сложности. Поэтому для общего развития нужно хотя-бы поверхностно разбираться что там к чему (в идеале - попробовать такие фишки как tree shaking и code splitting).

Мой совет - для этого просто начните с нуля собирать проект. Подсматривайте готовые конфиги и постепенно собирайте свой, читая при этом документацию. При устройстве на работу будет однозначно плюсом, да и в собственной разработке не все же create-react-app'ом пользоваться.

PS а про gulp - не знаю, давно уже не приходилось его в живую использовать: все что нужно - может webpack

Webpack заморочен, а с переходом на вторую версию старые мануалы/курсы/скринкасты имеют неточности вроде бы в незначительных мелочах, а ведь не работает!
Но когда вы поймете как он работает, как его настроить, он станет вам незаменимым помощником. Использовать разумеется сразу вторую версию.
Отдельно webpack имеет смысл использовать для сборки SPA и только. Для верстки обычного сайта без помощи таск-менеджера вам не обойтись. И тут на сцену выходит простой и надежный gulp, который и изучать-то особо не надо (если вы конечно не полный чайник в javascript). Он вам и скрипты сбилдит, и стили скомпилирует, и картинки оптимизирует, и спрайты соберет... Список можно продолжать до бесконечности. Без преувеличения.
Более того, gulp может для вас и webpack запустить, если хочется обрабатывать javascript-файлы именно им. Они прекрасно дружат вместе.
И не нужно там ничего заучивать. Добавьте пару закладок на документацию в браузер, почитайте/посмотрите несколько уроков, чтобы понять как в принципе настраивать инструмент. Потом делайте себе конфиги, удачные сохраняйте и переиспользуйте, расширяйте.