Хорошее одностраничное приложение должно быть удобным в обслуживании, надежным и эффективным. 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 полезным. Пожалуйста, оставьте комментарий, если у вас есть дополнительные вопросы; Я с радостью отвечу на них.
Ссылки
- Webpack
- Эффективный конвейер статических активов с помощью Webpack Александрин Буасьер
Об авторе
Мартин Юнг (Martin Jung) - инженер-программист в команде Mobile Web. Недавно он развлекается с React и Webpack. В свободное от работы время он любит узнавать о других культурах и истории. Следите за сообщениями Мартина в Twitter @ martinjung03.