Представим, что у вас в отдельном файлике есть какие-то глобальные значения, и вы хотите передать их при сборке проекта в JS, CSS или HTML код.

С Webpack это очень просто.

Инициализация проекта

Стандартное скучное начало:

  • Установите node.js, если еще не установили.
  • Создайте новую папку и инициализируйте проект командой npm init -y.
  • Установите webpack:
  • Добавьте в секцию scripts файла package.json команду для быстрой сборки проекта

Вот так должна выглядеть структура файлов:


В globals.js разместите все свои глобальные значения:


Конфигурация webpack — самая простая:

Рендер HTML с html-webpack-plugin

Начнем с расшаривания глобальных значений в HTML-файлах. Сейчас src/index.html пуст, добавим туда базовую разметку:


Внутри тега h1 находится странная конструкция. Таким образом мы пытаемся вывести в нем глобальную переменную myTitle.

Конечно, это не совсем HTML, а синтаксис шаблонизатора — EJS. Чтобы webpack мог обработать его, нужно подключить плагин html-webpack-plugin. Он будет обрабатывать EJS и выдавать валидный HTML-код.


Теперь добавим его в конфигурацию webpack:


Опция template указывает на файл, который нужно скомпилировать, а templateParameters — это данные для вставки в шаблон.

Запустите команду npm run build — и вуаля! В папке dist сгенерировался файл index.html, где переменная myTitle заменена на строчку Hello, world.

Передача данных в JavaScript

На самом деле, этот пункт здесь просто «до кучи», чтобы дополнить «святую троицу» HTML-CSS-JS.

Разумеется, вы знаете, как использовать переменные из globals.js в JavaScript-файле — и никакие дополнительные настройки webpack для этого не требуются. Просто импортируйте их!

Передача данных в CSS

Здесь все будет чуть сложнее. Нельзя просто так взять и передать JavaScript-объект в CSS. Для этого нам понадобится препроцессор, например, SASS.

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

  • sass-loader будет получать файл с кодом препроцессора и преобразовывать его в обычный css-код.
  • css-loader возьмет то, что получилось и превратит это в модуль, понятный webpack.
  • style-loader в конце просто выведет все стили в теге style в шапке документа.


Чтобы использовать в коде глобальные переменные из globals.js, мы должны передать их SASS-лоадеру. У него как раз для этого есть опция prependData. Но ее значением должна быть строка, а не JS-объект, поэтому предварительно его нужно конвертировать в нужный формат: "$myColor: red; $myTitle: '...'".

Код конвертера можно взять с GitHub. Разместите его в файле utils/jsToScss.js.

Вот обновленная конфигурация webpack:


Теперь вы можете создать файл src/style.scss, использовать в нем глобальную переменную $myColor и импортировать этот файл в src/index.js.



После того, как вы снова соберете проект, откройте в браузере dist/index.html и убедитесь, что глобальная переменная отработала как нужно.


Вот так — довольно просто — можно передать какие-то данные прямо в сборку webpack.

Весь исходный код можно найти в GitHub.

Полезные материалы

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован