Хорошее одностраничное приложение должно быть удобным в обслуживании, надежным и эффективным. Webpack - мощный инструмент для создания SPA, потому что:

  • Он управляет модулями и их зависимостями и преобразует статические ресурсы для создания пакетов.
  • Он создает одинаковые пакеты сборки при разработке и производстве для единообразия.
  • Он контролирует несколько точек или разделов входа в приложение и предоставляет для них общие пакеты. Другие уникальные пакеты для каждого раздела могут быть загружены по запросу.
  • Он может версировать ресурсы для каждого файла - например, добавляя уникальный хеш к имени файла (например, bundle.sd2fdds34.js). Это упрощает кэширование ресурсов. Он также поддерживает обновления в реальном времени (горячая замена модулей) во время разработки.

Для получения дополнительной информации, пожалуйста, прочтите презентацию Александрин Буассьер Эффективный конвейер статических активов с помощью Webpack, в которой объясняется, почему Webpack является хорошим выбором для конвейера статических активов.

Теперь давайте посмотрим, как мы можем использовать Webpack в нашем проекте.

Интерфейс командной строки Webpack

Webpack можно запустить в консоли с помощью следующей команды:

> webpack

Это попытается загрузить файл «webpack.config.js» в текущий каталог.

Чтобы указать другой файл конфигурации, мы можем запустить webpack с опцией:

> webpack --config ./example.config.js

Дополнительные параметры интерфейса командной строки можно найти в документации.

Webpack Config 101: точка входа и выход

Подскажите с чего начать, тогда я отдам вам связки.

По сути, мы даем Webpack отправную точку, затем Webpack вычисляет собственное дерево зависимостей, собирает все эти зависимости и создает пакет.

Изображенная выше диаграмма зависимостей может быть обработана очень простым файлом конфигурации:

С этой конфигурацией Webpack начнется с entry.js, выяснит его зависимости и создаст пакет с именем bundle.js в папке / dist. «Контекст» - это базовый каталог для разрешения опции «запись». Это должен быть абсолютный путь.

Webpack Config 101: несколько точек входа и выхода

Webpack также поддерживает создание нескольких пакетов для нескольких HTML-страниц (точек входа).

С этой конфигурацией Webpack создаст три пакета с именем в качестве «ключевого» значения каждой записи. Таким образом, выходы будут такими:

/dist/a.js, /dist/b.js, /dist/name_c.js

Webpack Config 101: загрузчики

Теперь, работает ли Webpack только для ресурсов javascript? Что делать, если файлы зависят от css, less, jpg, svg и т. Д.?

Не волнуйтесь: Webpack поддерживает другие типы ресурсов с помощью загрузчиков!

Пример конфигурации:

С этой конфигурацией, если Webpack обнаруживает какие-либо зависимости файлов html, js, css, изображения или меньше, он будет предварительно обрабатывать файлы с помощью загрузчиков, которые указаны в объекте JSON, и помещать их в пакеты. Объединение загрузчиков Webpack также может объединять загрузчики в цепочку с ! персонаж, который переходит от правого загрузчика к левому. В приведенном выше примере файлы * .less сначала будут преобразованы с помощью less-loader, а затем его вывод будет преобразован css-loader, а затем его вывод пройдет через style-loader. Встроенные таблицы стилей Одно интересное поведение из приведенной выше конфигурации связано со встроенными таблицами стилей. Style-loader! Css-loader будет предварительно обрабатывать таблицы стилей и вставлять их в выходной файл (ы) javascript по умолчанию. Во время выполнения этот встроенный стиль будет включен в HTML как тег style. Мы можем разделить набор стилей с помощью extract-text-webpack-plugin, который будет представлен в следующем разделе.

Webpack Config 101: плагины

В Webpack есть много полезных плагинов. Ниже приведены несколько полезных плагинов.

С этой конфигурацией Webpack будет генерировать пакеты javascript commons.js, a.js, b.js и c.js, а также файлы a.html, b.html и c.html в каталоге dist.

CommonsChunkPlugin используется для создания общего пакета и разделенного кода. Как говорится в комментариях к конфигурационному файлу, мы можем контролировать, какой модуль включен в общий пакет, указав параметры того, сколько раз и в какой записи используется общий доступ к модулю.

HtmlWebpackPlugin - это сторонний плагин, который создает файлы HTML для обслуживания пакетов веб-пакетов.

ExtractTextPlugin отделяет стили css от пакетов javascript. Как я упоминал во Встроенных таблицах стилей, таблицы стилей по умолчанию встраиваются в выходные файлы javascript. Но использование ExtractTextPlugin позволяет нам иметь отдельные файлы вывода css вместе с файлом (ами) javascript. Это означает, что у нас есть возможность для клиента загружать файлы css и javascript параллельно, вместо того, чтобы загружать файлы javascript большого размера.

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

Демо-репозиторий

Основываясь на темах, которые мы рассмотрели выше, я создал репозиторий, который демонстрирует:

  • как построить несколько точек входа
  • как использовать / делиться компонентами в каждой точке входа
  • как создавать разные ресурсы (js, jsx, less, png) с помощью загрузчиков
  • как создать общий пакет для точек входа, используя плагин
  • как создавать уникальные пакеты для каждой точки входа

В репозитории каталог «src» имеет два файла точки входа и семь компонентов React: компоненты зеленого, красного и синего ящиков, компоненты зеленого, красного и синего кругов и компонент общего изображения. В каталоге «dist» есть пакеты common.js, entry1.js и entry2.js, созданные с помощью Webpack.

Точка входа 1 обслуживает пакеты common.js и entry1.js. Common.js содержит компонент общего изображения, а entry1.js содержит все компоненты коробки.

Точка входа 2 обслуживает пакеты common.js и entry2.js. Common.js содержит компонент общего изображения, а entry2.js содержит все компоненты круга.

[caption id = ”attachment_3406 align =” aligncenter ”width =” 400]

Схема точки входа 1 [/ caption]

[caption id = ”attachment_3407 align =” aligncenter ”width =” 401]

Схема точки входа 2 [/ caption]

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

Заключение

Надеюсь, вы нашли это введение в Webpack полезным. Пожалуйста, оставьте комментарий, если у вас есть дополнительные вопросы; Я с радостью отвечу на них.

Ссылки

Об авторе

Мартин Юнг (Martin Jung) - инженер-программист в команде Mobile Web. Недавно он развлекается с React и Webpack. В свободное от работы время он любит узнавать о других культурах и истории. Следите за сообщениями Мартина в Twitter @ martinjung03.