Импорт модуля ради «побочных эффектов»?

Question

[Алексей Бугаев]

Начал изучать webpack, увидел пример импорта import './css/main.css'; на MDN пишут что это Импорт модуля ради «побочных эффектов». Никакой интерпретации и наглядных примеров нет. Я новичок поэтому если не сложно обЪясните понятно, что значит такой импорт?

Comments

[Сергей delphinpro]

В вебпаке все импортируется. А дальше он сам, в зависимости от настроек может раскидать код по файлам или упаковать все в единый бандл. При этом будет работать HMR в dev-server

Answer 1

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

Для начала стоит понять сам термин "побочный эффект".
Вот Вы вызываете функцию, а она что-то делает за своими пределами, например пишет в файл или localStorage, или меняет Ваш DOM на странице, или меняет глобальные объекты. Это и есть побочные эффекты.
Модуль тоже может иметь побочные эффекты. Например Вы можете не просто экспортировать некоторые функции из модуля, но и сразу что-то сделать, вне всяких функций.
Например пусть у нас будет такой модуль:

const div = document.body.appendChild(document.createElement('div'));

export function remove() {
  document.body.removeChild(div);
}

Даже если мы просто импортируем его, но не вызываем функцию remove, он все равно произведет свой побочный эффект - добавит новый div в body. И это произойдет при первом встретившемся импорте.
Нам в принципе может быть и не нужна функция remove (ее даже может и не быть), но нам нужен этот div в body - тогда можем просто сделать импорт как в Вашем примере и получить div в body в качестве результата.

Конкретно в контексте вебпака и импортирования стилей, у Вас скорее всего будет включен в обработку или style-loader или MiniExtractCssPlugin.loader. Побочный эффект style-loader - добавление тега style со стилями из импортируемого css в head. А у MiniExtractCssPlugin.loader - побочный эффект - извлечение стилей в отдельный файл.

Comments

[Алексей Бугаев]

Вот это круто вы все разжевали, как я вам благодарен, вы мне очень помогли!!!