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 npm install -gSudo и ключ -g позволяют установить модуль для всех пользователей через учётную запись администратора, но для этого потребуется ввести пароль.
3. Выполняем:npm init

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

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

			{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
		

Добавляем Webpack

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

			npm install webpack -D
		

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

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

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

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

			"scripts": {
  "build": "webpack",
  "start": "webpack --watch"
},
		

Теперь запускаем 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, что от него нужно.

			const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
		

«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. Например:console.log('This is rainbows.js')
4. Создаём другой JavaScript-файл — unicorns.js в каталоге js.
5. Пишем код в unicorns.js. Например:console.log('Hello, unicorns!')
6. Добавляем следующий код в app.js, чтобы импортировать rainbows.js и unicorns.js:import './js/rainbows.js';import './js/unicorns.js';
7. Запускаем Webpack в Терминале командой:npm run buildТеперь появился каталог 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;}
4. Добавляем следующий код в src/app.js, чтобы импортировать base.scss: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Добавляем плагин «Extract Text Plugin» в начало webpack.config.js. Он отвечает за перемещение CSS в отдельный файл.const ExtractTextPlugin = require('extract-text-webpack-plugin');Теперь указываем Webpack, что необходимо обработать .scss файлы. Он выполнит их через «Extract Text Plugin», CSS- и Sass-загрузчик. Вставляем следующий код после фигурной скобки группы «output». Обратите внимание на запятую!output: { ...},module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ]}Делаем ссылку на «Extract Text Plugin» прямо перед последней фигурной скобкой. Это даст знать Webpack, что все CSS-файлы необходимо соединить в отдельный файл и назвать его «style.css».plugins: [ new ExtractTextPlugin('style.css')]

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

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

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
};
		

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

1. Делаем ссылку на CSS-файл в <head>.
2. Запускаем Webpack в Терминале.npm run build
3. Открываем index.html в браузере. Если фон розовый, значит, CSS загрузился.
4. Благодаря команде Webpack watch, которую мы добавили в npm-скрипты, обработка происходит после каждого изменения. Она будет производиться автоматически после каждого сохранения исходного файла в редакторе.npm run start
5. Вносим изменения в base.scss. Например:$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;}
3. Прописываем ссылку на typography.scss в src/app.js.import './scss/typography.scss';
4. Обновляем страницу в браузере. Типографика изменилась? Да, он работает!

Заключение

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

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