Как ни странно, детально разобраться с вебпаком я захотел именно для того, чтобы использовать в своих проектах CSS-пропроцессоры. Даже когда появился Gutenberg, я в это решил не вникать и создавал блоки для него на чистом JS 😁
В этом уроке постараюсь рассказать всё пошагово и очень легко, для тех, кто никогда не работал ни с чем из этого, но очень хочет. Начнём с настройки Node.js, потом перейдём к установке Webpack, и только потом уже установим необходимые для работы с SCSS препроцессором модули, также настроим минификацию.
Как я уже сказал, не очень много с этим работаю, поэтому жду ваших уточнений в комментариях (если будут).
Всё начинается очень легко – нужно перейти на сайт nodejs.org и скачать её как обычную прогу.
Проверяем, что всё установилось, для этого открываем Терминал (у меня Mac OS) и попробуем прочекать версию node.js: node -v
Для этого открываем терминал в папке с проектом (это лучше сделать через текстовый редактор, который вы используете, я например установил пакет для Atom для работы с терминалом и всё) и запускаем там npm init
, после чего будут появляться различные вопросы, например как назвать ваш проект, какая у него версия и т.д
npm run test
, оставляем значение по умолчанию,Не беспокойтесь, любую из этих настройек вы сможете вручную поменять в файле package.json
, который создастся после запуска npm init
.
Тут возможно кто-то захочет использовать, либо уже использует 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 начнём мониторить изменения файлов и осуществлять сборку после сохранения.Ещё один конфигурационный файл, который нам понадобиться создать самим. Начнём с такого шаблона в содержимом файла.
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
Суть проверки будет заключаться в том, что я создам два 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 я наверное ещё напишу отдельно.
Сначала давайте немного наглядности, чтобы вам было понятно. Точно так же, как и с 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 особо никаких ссылок приводить не буду, потому что там всё очень легко и вы сможете загуглить. Ну хорошо, хорошо, мне нравится эта дока.
Устанавливаем это: npm i css-loader sass-loader node-sass mini-css-extract-plugin -D
(если вы не догадались, npm i
это тот же npm install
Я установил
Тут нужно сделать несколько вещей, сначала я скопирую вам готовый 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', }), ] };
mini-css-extract-plugin
filename: '../style.css'
, что значит – нам не нужно создавать файл в assets, а использовать файл стилей темы.npm i optimize-css-assets-webpack-plugin -D
webpack.config.js
в начале файла const minify = require('optimize-css-assets-webpack-plugin');
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 вы можете найти в этом уроке.
Собирал сам тупил глуглил 3 месяца
https://github.com/Fobiya/coursecode
Намного проще и быстрее использовать Larave-Mix. Там всё это делается за 5 минут =)
Миша привет, а ты не думал чтобы настроить вебпак. Типа для каждого scss свой css и каждый отдельный файл подключать к блоку. Аналогично с js.
Привет!
Пока что нет
А вообще так делать это хорошая идея?
Я так пробовал с Галпом. Проблема связана с автообновлением стилей. Когда стили автообновляются из многих файлов, то это все начинает тормозить и лучше использовать один файл стилей.
Привет. Есть легче способ установки вебпака, погугли в связки с phpstorm.
Ещё очень удобно scss разбивать на файлы, где в одном файле буду функции, в другом переменные стилей, третий очистка (обнуление), хидер, футер, секции и т.д. Всё через import. В итоге получится один файл на продакшне
Привет!
да, файлы очень удобно разделять.
Все круто, но где ответ на вопрос "Зачем? Зачем ты это делал?" =)
Одно слово – Gutenberg 🙃