Как правильно работать модульно в js с webpack?

Question

[wakenbyWork]

Собираю scss + pug через gulp, а для js использую webpack.

И вот как пишу модули в modules:

hamburger.js - отдельный модуль который отвечает за скрытие и показ мобильного меню

const hamburger = document.querySelector('.hamburger')
const mobileMenu = document.querySelector('.mobile-menu')
const header = document.querySelector('.header')

start()
function start () {
  if (!hamburger || !mobileMenu) return

  hamburger.addEventListener('click', onClick)
}

function onClick () {
  setSizeMobileMenu()

  hamburger.classList.toggle('is-active')
  mobileMenu.classList.toggle('mobile-menu--close')

  if (hamburger.classList.contains('is-active')) {
    hiddenScroll()
  } else {
    showScroll()
  }
}

function setSizeMobileMenu () {
  const { bottom } = header.getBoundingClientRect()

  mobileMenu.style.top = `${bottom}px`
  mobileMenu.style.height = `calc(100vh - ${bottom}px)`
}

function hiddenScroll () {
  document.body.style.overflow = 'hidden'
}

function showScroll () {
  document.body.style.overflow = ''
}

(Пишу функцию start чтобы на страницах где нет нужный dom элементов не было ошибок). Можно отказаться от функции start?

После импортирую его вот так в главный js файл:

main.js - входной файл для webpack
import '%modules%/hamburger/hamburger'

Answer 1

[Иван Кулаков]

./modules/module.js

export function some() {
  console.log('asd');
}

export default { some }

main.js

import './modules/module.js';
some();

// или
import MyModule from './modules/module.js';
MyModule.some();