7.1. Вспомним основные моменты

Давайте вспомним основные моменты по пройденному материалу.

Webpack — это бандлер (сборщик), который упрощает разработку. Он включает пять концепций.

Entry — входная точка приложения

Входная точка приложения по умолчанию является строкой. Однако если нам нужно подключить несколько JS-файлов, то она может принимать объект с полями key (ключ) и value (значение).

Output — выход из приложения, его сборка

В зависимости от режима сборка приложения бывает:

1. Минимизированной — весь код сжат в одну строку, нет комментариев и лишнего кода.
2. Не минимизированной — имеет код самого бандлера в несжатом виде, могут быть комментарии.

Loaders — обработчики, plugins — плагины

Обработчики позволяют webpack работать с типами файлов, отличающимися от JS и JSON. Плагины расширяют уже имеющуюся поддержку, например, MiniCssWebpackPlugin отделяет стили от бандла.

Mode — режимы

Режимы нужны для более гибкого управления поведением webpack в зависимости от вводимой команды. Например, мы можем напрямую сказать сборщику, какие оптимизации применить.

Необходимый перечень зависимостей

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

Основные пакеты

HtmlWebpackPlugin и html-loader

Нужны для поддержки и обработки HTML-формата, ведь «из коробки» webpack понимает только JS и JSON.

Также нужен обработчик для кода Babel. Пакеты для него устанавливаются так:

npm i -D @babel/core @babel/preset-env babel-loader

Если в проекте разработка ведётся на TypeScript, его можно установить так:

npm i -D @babel/preset-typescript typescript thread-loader

thread-loader

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

Если коротко, thread-loader нужен для запуска нескольких обработчиков под .ts, .js или .tsx (React).

Работа со стилями

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

SCSS, Sass:

npm i -D mini-css-extract-plugin css-loader sass-loader sass postcss postcss-preset-env postcss-loader

LESS:

npm i -D mini-css-extract-plugin css-loader less-loader less postcss postcss-preset-env postcss-loader

Подробнее о PostCSS можно узнать в документации.

Изображения, шрифты, аудио и видео

Что касается изображений, шрифтов, аудио и видео — webpack уже имеет под собой работающие решения — ассеты или, asset modules. Это одно из нововведений webpack v5, которое позволяет избавиться от file-loader, url-loader и raw-loader. То есть устанавливать дополнительные пакеты не нужно.

Подробнее с ассетами можно ознакомиться здесь.

Сервер ведения разработки

Чтобы запустить всё, что мы обозначили, нужен сервер. Для этого вам пригодится webpack-dev-server.

Webpack-dev-server заменяет встроенные в редакторы кода:

• LiveEdit в WebStorm,
• LiveServer в VS Code.

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

---

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

Итог

Резюмируем сказанное. Вот список пакетов по категориям.

HTML

• html-webpack-plugin,
• html-loader.

JavaScript

• @babel/core,
• @babel/preset-env,
• babel-loader.

TypeScript + все пакеты JS

• typescript,
• thread-loader,
• @babel/preset-typescript.

SCSS, Sass

• mini-css-extract-plugin,
• css-loader,
• sass-loader,
• sass,
• postcss,
• postcss-preset-env,
• postcss-loader.

LESS

• mini-css-extract-plugin,
• css-loader,
• less-loader,
• less,
• postcss,
• postcss-preset-env,
• postcss-loader.

Server

webpack-dev-server.