Webpack

По сути, webpack это сборщик модулей для JavaScript приложений. Когда webpack собирает ваше приложение, он буквально строит дерево зависимостей, в которых нуждается каждый модуль, и генерирует один или несколько бандлов.

Начиная с версии 4 webpack не требует наличия конфигурационного файла для сборки проекта. Тем не менее он очень гибко настраивается.

Для начала вам необходимо понять базовые концепции

Entry
Output
Loaders (Загрузчики)
Plugins (Плагины)
Mode
Browser Compatibility (Совместимость с браузерами)

Этот документ описывает общий обзор этих концепций, в то же время по ссылкам вы можете посмотреть более детальные примеры.

Точка входа

Точка входа показывает какой модуль webpack должен использовать первым для построения внутреннего дерева зависимостей. Webpack выяснит от каких других модулей и баблиотек зависит эта точка входа (напрямую или косвенно).

По умолчанию это значение ./src/index.js, но вы можете установить другое значение в настройках, например

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Вывод

Вывод сообщает webpack место куда будет сохранен бандл и имя бандла. По умолчанию это ./dist/main.js.

Вы можете это настроить в поле output.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

В этом примере мы использовали свойства output.filename и output.path чтобы сообщить webpack место и имя результирующего файла.

Возможно, вы обратили внимание, что модуль path импортируется в первой строке. Это основной модуль Node.js для управления путями файлов.

Загрузчики (loaders)

Из коробки webpack понимает только JavaScript и JSON файлы. Загрузчики позволяют webpack обрабатывать другие типы файлов и конвертировать их в модули, которые могут быть загружены в ваше приложение и добавилены в дерево зависимостей.

Обратите внимание, что возможность импорта любого типа модулей, таких как css-файлы, это функция характерная для webpack и не поддерживается другими сборщками или таск-ранерами. Это оправдано, поскольку позволяет разработчикам строить более точное дерево зависимостей.

В общем случае, загрузчики имеют два свойства в конфигурационном файле:

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Конфигурация выше определяет свойство "правила" (rules) для единственного модуля с двумя обязательными свойствами test и use. Они говорят webpack компилятору следующее:

"Когда ты проходя через path встречаешь файл с расширением '.text' внутри выражения require()/import, используй raw-loader для преобразования прежде чем добавить в бандл".

Обратите внимание, что регулярные выражения для шаблонов поиска файлов не оборачиваются в кавычки, например, /.txt$/ это не тоже самое, что и '/.txt$/' или "/.txt$/". Первый вариант дает webpack инструкцию искать файлы оканчивающиеся на txt, а другие искать файлы по абсолютному пути '.txt', это скорее всего не то, что вы ожидаете.

Вопросы

1. Что такое поток документа?

Особенности позиционирования элементов. Position absolute, relative, fixed.

2. Что такое margin-collapsing и box-sizing?

Не схлопываются элементы, если к последнему применено свойство clear

content-box - свойства width и height не включают в себя margin, padding, border
border-box - свойства width и height включают в себя значения padding и border, но не margin.
padding-box - войства width и height включают в себя значения padding, но не margin и border.

3. Каким образом рассчитывается занимаемое и свободное пространство при использовании свойств flex-grow, flex-shrink?

flex-grow - способность элемента растягиваться. Свойство имеет значение от 0, которая служит пропорцией. По умолчанию - 0. Если указано только у одного элемента, например, 1, то он займет всё доступное место. Отрицательные числа не поддерживаются.

flex-shrink - способность элемента сжиматься при необходимости.

4. Контекст наложения

При указании свойства z-index позиция элемента будет зависеть от значения z-index родителя. Поэтому называется "Контекст наложения".

Что такое замыкание, каррирование, частичное применение, мемоизация? reduce, sort, filter, map, forEach, some, every Что такое функция-конструктор? Что такое прототип? Какие возможности имеет/дает? Какие 3 (как минимум) способа есть отнаследоваться в JavaScript-е? JS. Дескрипторы свойств объектов: что такое и что позволяют делать? JS. Что такое "всплытие" объявления переменных, и в каком случае у функций тут появляются особенности? Влияет ли директива use strict на "всплытие"? Как избежать "всплытия" переменных? JS. Как использовать стандартные методы массива для ненастоящих массивов (например, вызвать map для arguments) и почему это работает? GIT. Что делают флаги --squash и --no-ff? GIT. Что такое HEAD и detached HEAD в контексте git? Что значат HEAD^, HEAD~, HEAD@{1}? OOP. Что такое coupling и сohesion? OOP. Какие есть особенности у каждого из основных типов отношений между классами: композиции, агрегирования, наследования, ассоциации? OOP. Что такое принципы SOLID? Что означает каждая буква из акронима? Что такое Reason to change в определении первого принципа SRP? OOP. Что такое полиморфизм и инкапсуляция? Какие проблемы они решают? Какие виды полиморфизма поддерживает TS? FP. Что такое сайд эффекты? Чем они вредны и чем полезны? Что такое чистые функции? Что такое "грязные функции"? В чем преимущества одних над другими? Может ли из чистой функции произойти вызов "грязной"? FP. Что такое Immutability? Являются ли объекты, содержащиеся в переменных, объявленных с помощью const, иммутабельными? Какие преимущества имеют иммутабельные структуры данных? Что такое structural sharing и какие проблемы решает? Data. Когда могут возникать утечки памяти? Как их находить и устранять? Структуры и типы данных. Что такое связный список? Как его элементы хранятся в памяти? В чем его преимущества перед списком? Чем отличается от массива? Структуры и типы данных. Что такое WeakMap и WeakSet? В чем отличия от Map и Set? Какие примеры использования существуют? Базовые принципы проектирования. Что такое абстрагирование? Какие есть отличия между абстракцией, инкапсуляцией и скрытием информации? Базовые принципы проектирования. Когда абстрагирование противоречит принципу KISS? Почему наследование может приводить к нарушению KISS? Базовые принципы проектирования. Как принцип DRY связан с Cohesion? Как принцип DRY связан с принципом SRP? Какие есть примеры дублирования кода, которые не нарушают DRY? Ассинхронность. Что такое Event Loop? Что такое Job queue? Что значит цифра 100 в данном случае setTimeout(func, 100)? Генераторы. Что такое итераторы? В чём разница между перебором массива и итератора через конструкции: for, for of, for in? Рассказать про протоколы итерирования: Symbol.iterator и Symbol.asyncIterator Генераторы. Что такое генераторы? Где они могут пригодиться? Как происходит работа с async generators? JS. Что такое Promise? В чем разница при создании Promise с помощью конструктора и с помощью фабрики? Что такое promise chaining? Можно ли отменить выполнение промиса? JS. Что такое localStorage, sessionStorage, cookies, indexdb? Для чего нужны? Какие отличия? Когда что использовать? Какие есть ограничения? Что такое флаги в регулярных выражениях? Рассказать про флаги глобальности, регистронезависимости, многострочности. Что такое жадные и ленивые квантификаторы? Security. Что такое SOP и CORS? Как с ними работать? API. Объяснить отличия и основные особенности следующих видов API: REST API, JSON API, JSON RPC, GraphQL TS. Что такое перегрузка функции? Какие есть способы её реализовать?