Важно разделять 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 позволяют установить модуль для всех пользователей через учётную запись администратора, но для этого потребуется ввести пароль (для пользователей windows Sudo прописывать не нужно).

 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. Например:
   $bg-color: pink; body { background: $bg-color; }

   1 2 3 4

   $bg-color: pink; body { background: $bg-color; }

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

   1	import './scss/base.scss'

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

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

1. Выполняем команду в Терминале, чтобы установить style-loader, css-loader, sass-loader, node-sass, extract-text-webpack-plugin.
   npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D

   1	npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D

2. Добавляем плагин «Extract Text Plugin» в начало webpack.config.js. Он отвечает за перемещение CSS в отдельный файл.
   const ExtractTextPlugin = require('extract-text-webpack-plugin');

   1	const ExtractTextPlugin = require('extract-text-webpack-plugin');

3. Теперь указываем Webpack, что необходимо обработать .scss файлы. Он выполнит их через «Extract Text Plugin», CSS- и Sass-загрузчик. Вставляем следующий код после фигурной скобки группы «output». Обратите внимание на запятую!
   output: { ... }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   output: {   ... }, module: {   rules: [     {       test: /\.scss$/,       use: ExtractTextPlugin.extract({         fallback: 'style-loader',         use: ['css-loader', 'sass-loader']       })     }   ] }

4. Делаем ссылку на «Extract Text Plugin» прямо перед последней фигурной скобкой. Это даст знать Webpack, что все CSS-файлы необходимо соединить в отдельный файл и назвать его «style.css».

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

Расскажем HTML обо всем этом!

1. Делаем ссылку на CSS-файл в <head>.
   <link rel='stylesheet' href='dist/style.css'>

   1	<link rel='stylesheet' href='dist/style.css'>

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

   1	npm run build

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

   1	npm run start

5. Вносим изменения в base.scss. Например:
   $bg-color: orange;

   1	$bg-color: orange;

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

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

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

   @import url('https://fonts.googleapis.com/css?family=Roboto'); $base-font: 'Roboto'; $title-padding: 3em; h1 { font-family: $base-font; padding: $title-padding; }

   1 2 3 4 5 6 7

   @import url('https://fonts.googleapis.com/css?family=Roboto'); $base-font: 'Roboto'; $title-padding: 3em; h1 { font-family: $base-font; padding: $title-padding; }

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

   1	import './scss/typography.scss';

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

Заключение

Также существуют и другие способы настройки Webpack (они называются boilerplate), для меня было главным понять принципы среды, как она в действительности работает. Выше мы рассмотрели, как составные части окружения работают вместе.

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

Перевод статьи на hackernoon.com