Как я разбирался с 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.json, который создастся после запуска npm init.

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

2.1 Установка

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

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

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

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

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

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 мы как раз это и прописываем.

В принципе можете создать все необходимые директории и файлы, а также 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 я наверное ещё напишу отдельно.

Также обратите внимание на содержимое файла assets/script.js при переключении mode на production.

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

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: /.(scss|css)$/,
				use: [ 
					miniCss.loader,
					{
						loader : 'css-loader',
						options: { url : false }
					},
					'sass-loader'
				],
			},
		],
	},
	plugins: [
		new miniCss({
			filename: '../style.css',
		}),
	]
};

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

Минификация буде происходить после того, как вы поменяете строчку в webpack.config.js с

module.exports = {
	mode: 'development',

На

module.exports = {
	mode: 'production',

Видеоурок