Как я разбирался с Webpack. Настройка на примере SCSS.

Как ни странно, детально разобраться с вебпаком я захотел именно для того, чтобы использовать в своих проектах CSS-пропроцессоры. Даже когда появился Gutenberg, я в это решил не вникать и создавал блоки для него на чистом JS 😁

В этом уроке постараюсь рассказать всё пошагово и очень легко, для тех, кто никогда не работал ни с чем из этого, но очень хочет. Начнём с настройки Node.js, потом перейдём к установке Webpack, и только потом уже установим необходимые для работы с SCSS препроцессором модули, также настроим минификацию.

Как я уже сказал, не очень много с этим работаю, поэтому жду ваших уточнений в комментариях (если будут).

1. Node.js

1.1 Установка

Всё начинается очень легко – нужно перейти на сайт nodejs.org  и скачать её как обычную прогу.

Проверяем, что всё установилось, для этого открываем Терминал (у меня Mac OS) и попробуем прочекать версию node.js: node -v

1.2 Инициализируем проект

Для этого открываем терминал в папке с проектом (это лучше сделать через текстовый редактор, который вы используете, я например установил пакет для Atom для работы с терминалом и всё) и запускаем там npm init, после чего будут появляться различные вопросы, например как назвать ваш проект, какая у него версия и т.д

• package name – название проекта (по умолчнию – название папки проекта),
• version – версия (по умолчанию 1.0.0),
• description – описание проекта,
• entry point – типо основной файл вашего npm-проекта, который и будет запускаться при его сборке, это нам пока не понадобится, можно оставить значение по умолчанию (по умолчанию index.js),
• test command – команда, которая будет происходить при запуске npm run test, оставляем значение по умолчанию,
• git repository и keywords не понадобится,
• author – легко, имя автора,
• license – лицензия, (по умолчанию ISC),

Не беспокойтесь, любую из этих настройек вы сможете вручную поменять в файле package.json, который создастся после запуска npm init.

2. Установка Webpack

2.1 Установка

Тут возможно кто-то захочет использовать, либо уже использует Gulp, насколько я понимаю, большой разницы там нет, но я решил использовать webpack, потому что когда мы находим кастомные блоки для Gutenberg, они все на webpack.

Для установки webpack для проекта, там же, в терминале запускаем npm install webpack -D. Ключ -D означает, что webpack нам нужен только при разработке, но не нужен в рабочей версии проекта.

После выполнения команды запустится установка, после установки произойдёт вот что:

• В файле package.json в devDependencies появится "webpack": "^версия",
• В проекте с темой появится папка node_modules, там будут лежать файлы модуля вебпак. Когда потом будете переносить ваш плагин/тему на живой сайт, очень прошу, не переносите эту папку!! 🤦‍♂️

После установки также откройте файл package.json и добавьте в параметр scripts следующее:

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

• Когда в консоли будете писать npm run build – у вас будет запускаться сборка проекта.
• Если напишете npm run start – webpack начнём мониторить изменения файлов и осуществлять сборку после сохранения.

2.2 Конфигурация webpack.config.js

Ещё один конфигурационный файл, который нам понадобиться создать самим. Начнём с такого шаблона в содержимом файла.

const path = require('path');
 
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'scripts.js'
	}
};

Напоминаю, что наша цель вебпака в этом уроке – чтобы он собирал нам скрипты в scripts.js, и файл style.css из файлов sass. Т е есть файлы на входе и на выходе. И в webpack.config.js мы как раз это и прописываем.

• entry(строка 4) – ничего общего с index.js из шага 1.2. Это входной JS файл, в который будут подключаться все остальные, он находится в папке src. Тут ничего придумывать не нужно – всё стандартно.
• output (строка 5) – то, где создавать файл результата выполнения сборки. У меня это assets/script.js, но стандартно обычно для этого используется директория dist.

В принципе можете создать все необходимые директории и файлы, а также index.php (у нас же тема WordPress) и подключить в неё файл scripts.js

2.3 Проверяем, что на этом этапе webpack работает

Суть проверки будет заключаться в том, что я создам два JS файла с каким-то изишным кодом, подключу их в index.js, запущу вебпак и проверю, что произойдёт на сайте.

Итак, я создаю два файла test.js и test_1.js, которые располагаются в папке /src/js. В каждый из них я запишу по одной строчке кода, например console.log( 'какой-то текст' ).

Затем в файле index.js я их подключаю следующим образом:

import './js/test.js';
import './js/test_1.js';

После этого открываю терминал для проекта и запускаю сборку npm run build. Теперь, если правильно подключили файл scripts.js на вашем сайте, то в консоли браузера у вас должны появиться два сообщения.

Если проводить параллель с темой или плагином WordPress, то я бы использовал сборку непосредственно для той части кода, в которой я планирую работать с Gutenberg, React. Собирать лёгкий jQuery-код для самого сайта нет смысла. Про настройку JSX я наверное ещё напишу отдельно.

3. SASS/SCSS

3.1 Как это будет

Сначала давайте немного наглядности, чтобы вам было понятно. Точно так же, как и с JS файлами, давайте проделаем следующее:

1. Создаем директорию /src/scss и добавим в неё файл main.scss,
2. Одна из фишек препроцессоров – переменные, поэтому содержимое файла закинем такое:

$color: #fefefe;
body{
	color: $color;
}

3. Подключим наш файл main.scss там же – в index.js – import './scss/main.scss';,
4. Файл style.css в папке с темой у нас уже создан

Конечно сборку сейчас запускать не надо, у вас ничего не будет работать, я ведь хотел показать вам лишь общую картину.

Про синтаксис SASS особо никаких ссылок приводить не буду, потому что там всё очень легко и вы сможете загуглить. Ну хорошо, хорошо, мне нравится эта дока.

3.1 Установка

Устанавливаем это: npm i css-loader sass-loader node-sass mini-css-extract-plugin -D (если вы не догадались, npm i это тот же npm install

Я установил

• mini-css-extract-plugin для извлечения CSS в отдельные файлы,
• node-sass для компиляции SCSS в CSS.

3.2 Настройка webpack.config.js

Тут нужно сделать несколько вещей, сначала я скопирую вам готовый webpack.config.js, а потом прокомментирую его по частям.

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
 
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'scripts.js'
	},
	module: {
		rules: [{
			test:/\.(s*)css$/,
			use: [
				miniCss.loader,
				'css-loader?url=false',
				'sass-loader',
			]
		}]
	},
	plugins: [
		new miniCss({
			filename: '../style.css',
		}),
	]
};

• На строчке 2 мы подключили наш установленный плагин mini-css-extract-plugin
• Также у нас появились параметры module и plugins
• На строчке 23 указано filename: '../style.css', что значит – нам не нужно создавать файл в assets, а использовать файл стилей темы.
• На строке 16 я ставлю ?url=false, чтобы webpack не напрягал с путями изображений, так как я их планирую сразу расположить, где мне нужно. А то у вас были бы ошибки типа «Module not found: Error: Can’t resolve ‘./assets/logo.svg»

3.3 Минификация CSS

1. Устанавливаем плагин optimize-css-assets-webpack-plugin npm i optimize-css-assets-webpack-plugin -D
2. Подключаем его в webpack.config.js в начале файла const minify = require('optimize-css-assets-webpack-plugin');

Кстати, для webpack v3 или ниже используйте optimize-css-assets-webpack-plugin@3.2.0. А optimize-css-assets-webpack-plugin@4.0.0 для webpack v4.

3. Добавляем это:

optimization: {
	minimizer: [
		new minify({})
	],
},

В итоге файл webpack.config.js будет выглядеть так:

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const minify = require('optimize-css-assets-webpack-plugin');
 
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'scripts.js'
	},
	module: {
		rules: [{
			test:/\.(s*)css$/,
			use: [
				miniCss.loader,
				'css-loader',
				'sass-loader',
			]
		}]
	},
	optimization: {
		minimizer: [
			new minify({})
		],
	},
	plugins: [
		new miniCss({
			filename: '../style.css',
		}),
	]
};

Ничего не произошло при сборке? А вы поменяли в webpack.config.js параметр mode с development на production? 🙃

Продолжение про настройку Babel вы можете найти в этом уроке.

Видеоурок

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.