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
vsnode
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
, а затем применяет к ним следующие загрузчики, справа налево:
postcss-loader
— преобразует postcss в код sass.sass-loader
- преобразует sass в обычный css.css-loader
- читает файл css, разрешает операторыimport
иurl(...)
.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
Спасибо за прочтение
- 👏 Пожалуйста, хлопайте в историю и подписывайтесь на меня 👉
- 📰 Посмотреть больше материалов на Интервью по кодированию и проектированию систем
- 🔔 Подпишитесь на меня: LinkedIn!
Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями