body: { color: red }
радуешься, что все работает

можно просто переключать pointer-events.
Как-то так, например:
demo

<div style="height: 2000px; width: 400px; margin: 0 auto;" id="map-wrap">
            <iframe style="pointer-events: none;" src="https://yandex.ru/map-widget/v1/?um=constructor%3Ac94e45d7f53bf7d35e1ae3e4946b0966305666753488de23effbc47e7d2d337f&amp;lang=ru_RU&amp;scroll=false&amp;source=constructor" width="100%" height="100%" frameborder="0"></iframe>
        </div>

document.addEventListener('click', function(e) {
                var map = document.querySelector('#map-wrap iframe')
                if(e.target.id === 'map-wrap') {
                    map.style.pointerEvents = 'all'
                } else {
                    map.style.pointerEvents = 'none'
                }
            })

webpack в твоем случае будет излишним, имхо.
если вебпак, то можно юзать create-react-app, для того, чтобы что-то быстро напрототипировать - там уже готовый/настроенный/поперченный вебпак с hot module replacement.

в обычных случаях (вроде натянуть верстку на вордпресс или django), я как правило, юзаю галп с лайврилоадом, который однажды настроил и забыл - по-моему лучшее решение. Можешь как написать конкретно под свои нужды сеттинг, либо же найти готовый.
могу поделиться своим - https://github.com/fnnzzz/gulp-config

для каких-то совсем простых штук - можно юзать прямо npm-скрипты: https://gist.github.com/fnnzzz/f90304458ee24307a3d...

что касается других инструментов:
раньше долго сидел на саблайме с зоопарком плагинов (emmet, всякое для синтаксиса, сниппеты и пр.), недавно пересел на webstorm и доволен (особенно радует синхронизация настроек через репозиторий)

из препроцессоров юзаю только SCSS + бэм, но бэм использую малость кастомизированный с модификаторами через минус (читать тут - frontender.info/bem-sass-modifiers/)

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