Розширення конфігурації WordPress Create Block Script webpack
Завдяки офіційній підтримці від команди редактора WordPress (Gutenberg) тепер ви можете швидко почати роботу з плагіном блоку за допомогою WordPress Create Block Script (@wordpress/create-blockпакет npm).
Ця стаття стосується старішої версії сценарію створення блоку
Хоча цю теорію все ще можна застосувати, деяка інформація в цій статті може бути несумісною з останнім сценарієм створення блоку. Ви можете переглянути наш оновлений Посібник зі створення сценарію блоку тут.
У нас також є оновлений посібник щодо додавання додаткових точок входу до webpack.
У цій статті ми досліджуємо, як можна додати настроюваний webpack.config, щоб розширити wp-scriptsфункціональність компіляції блоку, створеного блоком.
За допомогою цього ми можемо розширити npm startкоманду для запуску додаткових завдань. У цьому випадку ми збираємося налаштувати плагін для компіляції Sass (sass, scss) у css.
Ми скомпілюємо Sass із /srcпапки у файли style.cssта editor.cssв корені плагіна.
Створіть наші файли Sass
Перше, що ми збираємося зробити, це створити нову папку за адресою /src/scss. Сюди ми додамо два файли:
/src/scss/editor.scss/src/scss/style.scss
Ми скопіюємо файли cssз /editor.cssі /style.cssв новостворені файли.
Потім ми видалимо файли /editor.cssта ./style.css
Файли SCSS і нова структура папок.
Імпортувати Sass в/src/index.js
У верхній частині /src/index.jsдодайте такі твердження:
import './scss/editor.scss';
import './scss/style.scss';
Це дозволить webpack забрати .scssфайли, щоб їх можна було обробити.
Таким чином, імпортуючи Sass у верхній частині нашого файлу, ми зможемо скомпілювати Sass для кількох блоків в одному плагіні в один файл. У цьому випадку він скомпілює Sass в один /editor.cssі /style.cssфайли для всього плагіна.
Налаштуйтеwebpack.config
Створіть новий файл у корені плагіна під назвою /webpack.config.js. Скопіюйте наступний код у цей файл:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Тепер у вашому терміналі введіть таку команду cdв кореневій папці плагіна:
Плагін має скомпілювати JavaScript у папку збірки як зазвичай.
Встановлення пакета для компіляції Sass
Ми збираємося використовувати mini-css-extract-pluginпакет npm, щоб створювати .cssфайли з нашого Sass, для цього нам також потрібна пара додаткових пакетів для обробки .scssфайлів у CSS.
Ми встановимо scss-loaderпакет npm, щоб ми могли скомпілювати CSS у Sass. це залежить від node-scss.
Ми також встановимо css-loaderпакет npm, щоб дозволити нам обробляти @importоператори в CSS.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Тепер розширте /webpack.config.jsфайл, щоб він виглядав так:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
У рядку 2 ми імпортували mini-css-extract-plugin, у рядку 20 ми оголосили його як плагін і передали ../[name].cssяк filename. Це означає, що скомпільований файл буде додано до кореневого каталогу плагіна.
У рядку 10 ми передали об’єкт, який має testпараметр, який використовує регулярний вираз, щоб вказати тип файлу, який ми перевіряємо, і useпараметр.
Параметр useмістить масив усіх плагінів, які ми збираємося застосувати для цього тесту. Він запускає плагіни знизу списку, закінчуючи вгорі.
Тепер, якщо ми запустимо npm start, він створить .cssфайл у кореневій папці плагіна.
Створення файлу CSS.
Дивлячись на файлову структуру, ми маємо два додаткових файли:
/index.css/index.css.map
(Ми також отримуємо кілька файлів JavaScript у /buildпапці, але я поясню, як з ними працювати пізніше).
Файл .map— це вказівник, який вказує вашій консолі JavaScript, у якому файлі спочатку було визначено CSS або Sass, і допомагає з налагодженням.
Вивчаючи /index.cssфайл, він містить код з файлів /src/scss/editor.scssі ./src/scss/style.scss
Це не те, чого ми хочемо, оскільки файли стилів і редакторів додаються окремо до php-файлу наших плагінів.
Розбиття файлу CSS
Щоб розділити цей /index.cssфайл, нам потрібно скористатися optimization.splitChunksоб’єктом webpack 4. Щоб дізнатися більше про його конфігурацію, прочитайте сторінку документації splitChunks.
Додайте до свого /webpack.config.jsфайлу наступне:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Видаліть раніше створені файли та папку збірки та запустіть npm start.
Тепер ми отримуємо такі файли:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Дивлячись на те /editor.css, /style.cssвони були згенеровані правильно та містять потрібний код!
Створення файлів редактора та стилів CSS.
Файли в /buildпапці не потрібні для нашого налаштування, далі я досліджу, як їх видалити.
Видалення непотрібних файлів
Для видалення непотрібних файлів ми будемо використовувати ignore-emit-webpack-pluginпакет npm.
Цей плагін не дозволяє webpack виводити (або «виділяти» певні файли).
Встановіть пакет npm за допомогою команди терміналу:
npm install ignore-emit-webpack-plugin --save-dev
Змініть свій /webpack.config.jsфайл, щоб включити конфігурацію для плагіна Ignore Emit webpack.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Зверніть увагу на нові посилання в рядку 2, який містить плагін Ignore Emit, і в рядку 41, який повідомляє плагіну, які файли не видавати.
Тепер, коли ми запускаємо npm start(після видалення /buildпапки) /build/editor.js, /build/editor.js.map, /build/style.jsі /build/style.js.mapбільше не створюються.
Лише виробництво
Якщо ми хочемо отримати лише вихід продукту та виключити .mapфайли, ми можемо просто передати devtool: falseяк параметр у наш module.exportsоб’єкт, і це запобіжить .mapгенерації файлів.
Оскільки ми хочемо, щоб ці файли були виключені лише на робочому сервері, ми можемо перевірити process.env.NODE_ENVналаштування, щоб побачити, яке налаштовано наше поточне середовище, і перейти, devtool: falseякщо середовище налаштовано на робоче.
Для цього додайте наступне до початку нашого /webpack.config.jsфайлу:
const production = 'development' !== process.env.NODE_ENV;
Потім додайте наступне до кінця файлу:
if (production) {
module.exports.devtool = false;
}
Якщо npm startкоманда виконується, а середовище вузла не налаштовано на виробництво, .mapфайли не будуть створені.