7.6. Итоговый тест по курсу

1. Для чего используются указанные команды?

Базовые команды

Так и есть. Мы также можем напрямую обращаться к пакету webpack, без npx. Но это уже дело привычки.

2. С какими типами файлов webpack может работать «из коробки»?

Да, это действительно так. Webpack может работать с данным типом файлов без каких-либо усилий и настроек.

Без дополнительных пакетов webpack не умеет обрабатывать HTML-код. А Pug является HTML-шаблонизатором, он используется как дополнительный инструмент.

Всё так, webpack может работать с этим типом файлов без дополнительных настроек.

3. Отличаются ли указанные записи, отвечающие за подключение HTML-файлов, по функциональности?
// Первый вариант
plugins: [
new HtmlWebpackPlugin({
  template: `./pages/index.html`,
  filename: `./pages/index.html`,
}),
new HtmlWebpackPlugin({
  template: `./pages/main.html`,
  filename: `./pages/main.html`,
}),
new HtmlWebpackPlugin({
  template: `./pages/sup.html`,
  filename: `./pages/sup.html`,
}),
new HtmlWebpackPlugin({
  template: `./pages/test.html`,
  filename: `./pages/test.html`,
}),
new MiniCssExtractPlugin()
].filter(Boolean)
// Второй вариант
plugins: [].concat(
  fileName.map(
    (file) =>
      new HtmlWebpackPlugin({
        template: `./pages/${file}.html`,
        filename: `./pages/${file}.html`,
      }),
  ),
  [new MiniCssExtractPlugin()].filter(Boolean),
),

Нет. Обе записи валидны и работают так, как мы ожидаем.

4. За что отвечает данное поле с его содержимым?

Правила

Действительно. Данное поле отвечает за обработку стилей, кода и изображений.

5. За что отвечает указанная переменная?
const path = require('path');
module.exports = {
  context: path.resolve(__dirname, './src')
}

Нет. Дополнительно устанавливать ничего не нужно, всё это доступно нам «из коробки». Также контекст отвечает за сокращение путей, а не за подключение чего-либо.

6. Что такое бандл в webpack?

Не совсем верно. Для сборки приложения сторонние плагины необязательны.

7. Что означает указанный вывод сообщений в консоль?

Предупреждение

Действительно. Данное предупреждение в конце предлагает нам перейти по ссылке, чтобы изучить методы оптимизации приложения.

8. Где находится директория dist во время работы сервера? (webpack-dev-server)

В DevTools находится содержимое данной директории в скомпилированном (преобразованном) виде.

9. При наличии данных скриптов в файле package.json выполнится ли следующая цепочка?

Скрипты

npm start && npm run build && npm run deploy

Верно. Сначала выполнится start, а остальные команды будут дожидаться окончания работы сервера (Ctrl + C остановит его) и выполнятся за ним.

10. Какие особенности у выполнения ряда следующих команд?
npm start && npm run build && npm run deploy

Не совсем. Остальные команды будут ждать остановки сервера.

11. В чём разница между загрузчиком и плагином?

Это так. Загрузчик отвечает за обработку некоторых типов файлов, а плагины нацелены на расширение функций.

12. Может ли webpack разбивать код на отдельные файлы?

Неверно, не нужно создавать определённые условия. Нужно лишь настроить.

13. Посредством чего можно добиться оптимизации проекта?

Верно, ведь большая часть полей webpack гибко настраивается.

Да, не забываем про код-сплиттинг.

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

14. За что отвечает поле clean в конфиге webpack?

Нет. Поле отвечает за удаление дубликатов файлов при повторных сборках проекта.

15. Для чего используется HtmlWebpackPlugin?

Закрытие парных тегов поддерживается редакторами кода.