Webpack: основы настройки проекта на JavaScript и Sass

Важно разделять JavaScript и CSS-код на маленькие по объему части. Этим мы упрощаем себе и другим понимание и поддержку проекта. Браузеры, с другой стороны, предпочитают работать с маленьким количеством файлов, пускай длинными и слабо читаемыми. Здесь на помощь приходит Webpack.

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»). В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.

Устанавливаем Node и npm

Webpack построен на Node.js, поэтому для его работы требуется запуск как Node, так и npm (node package manager — менеджер пакетов Node). Порядок действий:

  1. Скачиваем и устанавливаем Node.js с официального сайта.
  2. Для установки npm открываем командную строку (например, Терминал MacOS) и выполняем команду:
    Sudo и ключ -g позволяют установить модуль для всех пользователей через учётную запись администратора, но для этого потребуется ввести пароль.
  3. Выполняем:

При создании файла package.json просто нажимайте «Enter»: настройки по умолчанию приемлемые. Кроме того, при необходимости можно их изменить.

Когда package.json создан, вы увидите небольшой документ с настройками. В нём хранится всё, что нужно знать о себе проекту.

Добавляем Webpack

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

После чего произойдёт 3 вещи:

  1. Имя «Webpack» добавится в package.json в качестве devDependency (будет использоваться при разработке, но не в рабочей версии). Для этого указывается ключ -D.
  2. Новый каталог node_modules добавится к проекту.
  3. Webpack (файлы модуля) появятся в каталоге node_modules.

Добавляем Webpack как скрипт

Добавляем следующий скрипт в package.json:

Теперь запускаем Webpack-версию проекта через npm, выполнив npm run build и npm run start в командной строке.

В документации Webpack глобальную установку не рекомендуют. Она вынуждает разработчика использовать во всех проектах определенную версию Webpack и приводит к краху, если использовать другую версию.

Файловая структура

  1. Создаём новый каталог src в корне проекта.
  2. Создаём файл src/app.js, в котором укажем путь к нашим .js и .scss файлам.
  3. Создаём файл index.html в корне проекта.
  4. Делаем ссылку на JavaScript-файл перед тегом </body> в index.html:
    Делайте ссылку только на dist\bundle.js, а src\app.js включать не требуется. Дело в том, что этого файла ещё нет. Webpack сделает его для нас.

Конфигурация Webpack

  1. Создаём файл webpack.config.js в корне проекта.
  2. Копируем и вставляем следующий фрагмент кода, который подскажет Webpack, что от него нужно.

«Entry» и «Output»

«Entry» (входные данные). Входной файл называется app.js и расположен в каталоге src.

«Output» (выходные данные). Это место, куда Webpack будет размещать готовый файл. Он будет называться bundle.js и появляться в каталоге dist («distribution» — с англ. «размещение»).

Изменять имена можно, но при этом необходимо синхронизировать изменения в webpack.config.js, файлах, каталогах и связанных скриптах в HTML.

Добавляем JavaScript

Теперь напишем код для последующей обработки с помощью Webpack:

  1. В каталоге src создаем каталог js.
  2. Внутри js создаем JavaScript-файл rainbows.js.
  3. Пишем код в rainbows.js. Например:
  4. Создаём другой JavaScript-файл — unicorns.js в каталоге js.
  5. Пишем код в unicorns.js. Например:
  6. Добавляем следующий код в app.js, чтобы импортировать rainbows.js и unicorns.js:
  7. Запускаем Webpack в Терминале командой:
    Теперь появился каталог dist!

    После запуска index.html в браузере откройте инструменты разработчика (Developer Tools) и посмотрите на консоль. Там будут сообщения как из rainbows.js, так и unicorns.js.

Добавляем SCSS

  1. Создаём каталог scss в src.
  2. Создаём файл base.scss в каталоге scss.
  3. Добавляем CSS-код в base.scss. Например:

  4. Добавляем следующий код в src/app.js, чтобы импортировать base.scss:

Чтобы Webpack прочитал sass-стили, необходимо добавить дополнительные загрузчики.

Добавляем загрузчики стилей

    1. Выполняем команду в Терминале, чтобы установить style-loader, css-loader, sass-loader, node-sass, extract-text-webpack-plugin.
    2. Добавляем плагин «Extract Text Plugin» в начало webpack.config.js. Он отвечает за перемещение CSS в отдельный файл.
    3. Теперь указываем Webpack, что необходимо обработать .scss файлы. Он выполнит их через «Extract Text Plugin», CSS- и Sass-загрузчик. Вставляем следующий код после фигурной скобки группы «output». Обратите внимание на запятую!
    4. Делаем ссылку на «Extract Text Plugin» прямо перед последней фигурной скобкой. Это даст знать Webpack, что все CSS-файлы необходимо соединить в отдельный файл и назвать его «style.css».

Webpack.config.js теперь выглядит так:

Расскажем HTML про всё!

  1. Делаем ссылку на CSS-файл в <head>.

  2. Запускаем Webpack в Терминале.

  3. Открываем index.html в браузере. Если фон розовый, значит, CSS загрузился.
  4. Благодаря команде Webpack watch, которую мы добавили в npm-скрипты, обработка происходит после каждого изменения. Она будет производиться автоматически после каждого сохранения исходного файла в редакторе.

  5. Вносим изменения в base.scss. Например:

  6. Обновляем страницу в браузере. Цвет фона меняется на оранжевый.

Добавляем и редактируем файлы

  1. Создаём файл typography.scss в каталоге src/scss.
  2. Добавляем в него немного кода SCSS. Например:

  3. Прописываем ссылку на typography.scss в src/app.js.

  4. Обновляем страницу в браузере. Типографика изменилась? Да, он работает!

Заключение

Существуют ещё другие способы настройки Webpack, но главное — понять принципы среды, как она в действительности работает. Выше мы рассмотрели, как составные части среды работают вместе.

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

Перевод статьи «Webpack: The Basics»