webpack — это сборщик модулей для приложений javascript
Разница между Gulp, Grunt, Bower, Webpack и Browserify

Вопрос. Что такое пакет в веб-пакете?
Ответ: пакет — это выходной файл, созданный веб-пакетом. Он содержит все модули, которые используются в приложении. Процесс генерации бандлов регулируется конфигурационным файлом webpack.

Вопрос. В какой среде работает webpack?
Ответ: node.js

Вопрос. Что такое граф зависимостей и как его строит веб-пакет?Ответ. Каждый раз, когда один файл зависит от другого, веб-пакет рассматривает это как зависимость. Начиная с точек входа, веб-пакет рекурсивно строит граф зависимостей, который включает в себя все модули, необходимые вашему приложению, используя операторы import и require, а затем упаковывает все эти модули в пакеты.

Вопрос: что такое тряска дерева?
Ответ:

  • Встряхивание деревьев — это термин, используемый в мире JavaScript для описания процесса удаления неиспользуемого кода из окончательного пакета.
  • Это можно сделать с помощью такого инструмента, как Webpack, который проанализирует ваш код и удалит все неиспользуемые фрагменты, что приведет к уменьшению размера пакета. Это особенно важно для интерфейсных приложений, где на счету каждый килобайт!

Вопрос. Что такое Hot-Modules-Replacement?
Ответ: Hot-Modules-Replacement (HMR) — это функция веб-пакета, которая позволяет обновлять модули в приложении без перезагрузки страницы. HMR можно использовать как расширенную замену livereload.

Вопрос: объясните мне разницу между NPM, Bower, Browserify, Gulp, Grunt и Webpack?

  • npm и bower — менеджеры пакетов. Они просто загружают зависимости и не знают, как создавать проекты самостоятельно. Что они знают, так это вызывать webpack/gulp/grunt после получения всех зависимостей.
  • bower похож на npm, но строит сглаженные деревья зависимостей (в отличие от npm, которые делают это рекурсивно). Это означает, что npm извлекает зависимости для каждой зависимости (может извлекать одно и то же несколько раз), в то время как bower ожидает, что вы вручную включите подзависимости. Иногда bower и npm используются вместе для внешнего и внутреннего интерфейса соответственно (поскольку каждый мегабайт может иметь значение для внешнего интерфейса).
  • grunt и gulp — это исполнители задач для автоматизации всего, что можно автоматизировать (например, компилировать CSS/Sass, оптимизировать изображения, создавать бандлы и минимизировать/транспилировать их).
  • grunt против gulp (это как maven против gradle или конфигурация против кода). Grunt основан на настройке отдельных независимых задач, каждая из которых открывает/обрабатывает/закрывает файл. Gulp требует меньше кода и основан на потоках Node, что позволяет ему создавать цепочки каналов (без повторного открытия одного и того же файла) и делает его быстрее.
  • webpack (webpack-dev-server) — Webpack — это инструмент сборки, который помещает все ваши активы, включая Javascript, изображения, шрифты и CSS, в граф зависимостей.
  • Плагины npm/bower + могут заменить средства запуска задач. Их способности часто пересекаются, поэтому есть разные последствия, если вам нужно использовать gulp/grunt вместо npm + плагинов. Но таск-раннеры определенно лучше подходят для сложных задач (например, «при каждой сборке создавать пакет, транспилировать из ES6 в ES5, запускать его во всех эмуляторах браузеров, делать скриншоты и развертывать в дропбокс через ftp»).
  • browserify позволяет упаковывать модули узлов для браузеров. browserify vs node require на самом деле означает AMD vs CommonJS.

Погрузчики

Вопрос: Что такое загрузчик в webpack
Ответ:

  • Загрузчики — это преобразования, применяемые к исходному коду модуля.
  • Загрузчики описывают веб-пакету как обрабатывать модули, отличные от JavaScript, и включать эти зависимости в ваши пакеты.
  • Webpack поддерживает модули, написанные на разных языках и с помощью препроцессоров, через загрузчики.

Вопрос: Где должны быть определены загрузчики?
Ответ: в свойстве rules объекта конфигурации

Вопрос. Объясните этот код.

{
   test: /\.scss$/,
   loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap', 'postcss-loader'],
   exclude: /node_modules/
}

Ответ: Этот код предназначен для преобразования и загрузки файлов sass в виде модулей веб-пакета. Эта конфигурация указывает веб-пакету искать все файлы с расширением .scss, а затем применяет к ним следующие загрузчики, справа налево:

  1. postcss-loader — преобразует postcss в код sass.
  2. sass-loader - преобразует sass в обычный css.
  3. css-loader - читает файл css, разрешает операторы import и url(...).
  4. style-loader — создает теги <style> в элементе <head> страницы, содержащем CSS, возвращенный css-loader.

Из-за ?sourceMap в конце css-loader и sass-loader будут созданы исходные карты для всех файлов .scss.

Вопрос. Загрузчики работают синхронно или асинхронно?Ответ: Оба. Загрузчики могут работать синхронно или асинхронно.

Вопрос. Можно ли использовать несколько загрузчиков в rules одном объекте?Ответ: Да, можно объединить загрузчики в цепочку.

Вопрос. Назовите загрузчики, которые вы считаете очень важными и полезными
Ответ: raw-loader, url-loader, html-loader, загрузчик файлов, загрузчик стилей, загрузчик css, загрузчик скриптов, загрузчик babel, загрузчики для typescript, coffescript, less, sass, pug, markdown и т. д.

Плагины

Вопрос. Опишите плагин в webpack
Ответ:

  • Плагины, используемые для настройки процесса сборки webpack различными способами.
  • Плагин веб-пакета — это объект JavaScript, который имеет свойство применения. Это свойство apply вызывается компилятором webpack, предоставляя доступ ко всему жизненному циклу компиляции.
  • Webpack поставляется с несколькими встроенными плагинами, доступными в разделе webpack.[plugin-name].

Вопрос. В чем разница между загрузчиком и плагином
Ответ:

  • Загрузчики выполняют предварительное преобразование файлов практически любого формата, когда вы используете что-то вроде require("my-loader!./my-awesome-module") в своем коде. По сравнению с плагинами они довольно просты, поскольку (а) предоставляют веб-пакету только одну единственную функцию и (б) не могут влиять на фактический процесс сборки.
  • Плагины, с другой стороны, могут глубоко интегрироваться в веб-пакет, потому что они могут регистрировать хуки в системе сборки веб-пакетов и получать доступ (и изменять) к компилятору и тому, как он работает, а также компиляция. Поэтому они мощнее, но и сложнее в обслуживании.

Вопрос: назовите несколько плагинов, которые вы считаете очень важными и полезными
Ответ:

  • CommonsChunkPlugin — создает отдельный файл (известный как фрагмент), состоящий из общих модулей, совместно используемых несколькими точками входа.
  • DefinePlugin — позволяет создавать глобальные константы, которые можно настроить во время компиляции.
  • HtmlWebpackPlugin – упрощает создание HTML-файлов для обслуживания пакетов веб-пакетов.
  • ExtractTextWebpackPlugin — извлечение текста из пакета или пакетов в отдельный файл.
  • CompressionWebpackPlugin. Подготовьте сжатые версии ресурсов для их обслуживания с помощью Content-Encoding.

Вопрос. В чем преимущество CompressionPlugin?
Ответ: CompressionPlugin создает версии пакетов в формате gzip. Можно просто добавить сжатие на стороне сервера, например, с помощью плагина сжатия nginx или expres. Сжатие на стороне сервера не рекомендуется, поскольку оно увеличивает нагрузку на ЦП и увеличивает время отклика.

Вопрос: Как переместить некоторые данные (например, код css) из пакета в отдельный файл в веб-пакете?
Ответ: с помощью Извлечьтекствебпакплагин. Он перемещает все необходимые модули *.css во входных блоках в отдельный файл CSS. Таким образом, ваши стили больше не встроены в пакет JS, а находятся в отдельном файле CSS (styles.css). Если ваш общий объем таблицы стилей велик, это будет быстрее, потому что пакет CSS загружается параллельно пакету JS. https://github.com/webpack-contrib/extract-text-webpack-plugin

Вопрос: Можно ли написать свой собственный плагин?
Ответ: Да, можно написать свой собственный плагин и использовать плагины написано сообществом.

Вопрос Каковы некоторые преимущества использования webpack-dev-server по сравнению с простым сервером http или nginx?
Ответ: webpack-dev- server упрощает процесс разработки благодаря встроенному быстрому доступу в памяти к ресурсам веб-пакета и функциям горячей замены модулей.

Вопрос: Как включить исходные карты в пакетах веб-пакетов?
Ответ: Используя devtool: 'source-map' (существуют различные другие конфигурации исходных карт, полный список смотрите здесь)

Оптимизация

Вопрос. Кратко опишите долгосрочное кэширование и как его реализовать с помощью веб-пакета?

Ответ. Браузеры должны кэшировать статические объекты, чтобы экономить трафик и время пользователей. Но после каждого изменения или исправления браузер должен загружать более новую версию файлов. Самый простой способ добиться этого — изменить имя файла. Это может быть buildId или уникальный хэш в конце имени файла, например

app.js?build=1
    app.js?build=2

or

app.js.2a6c1fee4b5b0d2c9285.js
  app.js.70b594fe8b07bcedaa98.js

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

module.exports = {
    ...
    output: {
     filename: "[name].[hash].js"
    }
    ...
   }

Вопрос. Какой встроенный плагин следует использовать для минимизации кода?Ответ: Плагин UglifyJS.

Вопрос: Как удалить неиспользуемые селекторы из css с помощью webpack?
Ответ: С помощью плагина purifycss-webpack

Спасибо за прочтение

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями