Как webpack собирает импорты и экспорты?

Question

[ArgeoMer]

Хотелось бы прочитать статью на тему того как webpack собирает bundle. Я не могу разобраться. Вот, например, в эитх фалах
main.js:

import ButtonView from './view/button-view.js'
const smth = new ButtonView()

а это подключаемый к нему файл(button-view.js):

import {createElement} from '../render.js';

const createButtonTemplate = () => '<button></button>';

export default class ButtonView {
  getTemplate() {
    return createButtonTemplate();
  }

  getElement() {
      this.element = createElement(this.getTemplate());
  }
}

Каким образом webpack сделал так чтобы функция createElement была доступна для ButtonView() в main.js и не доступна для вызова в самом файле main.js. То есть, мой вопрос в следующем: "как webpack создает единый файл, не нарушая логики?". Заранее спасибо.

Answer 1

[Дмитрий Беляев]

Есть 2 основных подхода для решения проблемы изоляции имен в модулях:
- подход webpack до 4 версии включительно - завернуть каждый исходный модуль в свою функцию и переложить эту задачу на средства языка js;
- подход rollup и последователей типа vite - произвести переименование сущностей так, чтоб разные сущности из разных модулей названные одинаково назывались по разному, а одни и те же сущности названные по разному в разных модулей назывались одинаково.

У каждого из подходов есть свои плюсы и минусы.
В подходе webpack с одной стороны получается очень надежная изоляция, так как работают средства самого языка, но с другой на выходе получается больше кода, так как добавляются обертки + некий рантайм для взаимодействия виртуальных модулей. Так же такой код хуже оптимизируется на постобработке, так как тулзы вроде terser банально не могут восстановить связи между разными модулями. Хотя тот же рантайм позволяет гибко разбивать код на чанки и эмулировать динамические импорты.
В подходе rollup возможны ошибки на промежуточной обработке (сам rollup предусматривает большинство из них, а вот плагины могут накосячить, особенно на больших проектах), зато нет дополнительного кода и тулзы вроде terser могут обрабатывать весь бандл целиком со всеми межмодульными связями, а значит делать более эффективные оптимизации.

В webpack 5 был использован гибридный подход. Модули все так же изолируются средствами языка и соединяются посредством рантайма. Но часть модулей могут быть соединены в один по принципу rollup, что улучшает общий размер бандла и оптимизацию на постобработке.

P.S. сделайте небольшой проект из примерно 10 модулей, соберите его webpack/rollup в dev режиме и посмотрите что получается на выходе, очень многое станет понятно, если просто почитать код получившегося бандла.

Comments

[ArgeoMer]

Спасибо, очень помогло понять

Answer 2

[FairyTaleComposer]

Вебпак изолирует каждый модуль, оборачивая его код в анонимную функцию. Таким образом у каждого модуля образуется своя область видимости. Отсюда то, что не экспортируется, не видно за пределами этого модуля. Любые глобальные переменные, функции, классы перестанут быть глобальными.
Статей конкретно по этому вопросу пока не вижу, может позже найду, либо кто-то другой подскажет.