Додаткова конфігурація для webpack
Ця стаття базується на webpack.config.jsфайлі, який ми створили в статті Розширення конфігурації веб-пакета WordPress Create Block Script. Якщо ви не читали цю статтю, ви можете швидко її прочитати.
Ця стаття стосується старішої версії сценарію створення блоку
Хоча цю теорію все ще можна застосувати, деяка інформація в цій статті може бути несумісною з останнім сценарієм створення блоку. Ви можете переглянути наш оновлений Посібник зі створення сценарію блоку тут.
У нас також є оновлений посібник щодо додавання додаткових точок входу до webpack.
Підтримка кросбраузера CSS із полізаповненнями та префіксами
Перш ніж ми приступимо до цього, я хочу віддати належне Джеффрі Карандангу за його чудову статтю про використання PostCSS із webpack, для створення якої я черпав натхнення для цього розділу статті.
Щоб підтримувати полізаповнення та кросбраузерні префікси, ми збираємося використовувати postcss-loaderпакет npm для завантаження плагіна [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Переконайтеся, що ми cdперейшли в кореневу папку нашого плагіна, виконайте наступне, щоб установити ці два пакунки.
npm install postcss-loader postcss-preset-env --save-dev
Далі нам потрібно розширити нашу /webpack.config.jsконфігурацію для цих двох пакетів:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins:() => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
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,
},
default: false,
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
],
};
if (production) {
module.exports.devtool = false;
}
Зверніть увагу на зміни в рядках 4 і 18.
Тестування автопрефіксера
Давайте додамо код до нашого /src/sass/style.scssфайлу, щоб перевірити функцію автопрефіксу плагіна PostCSS. Я вставлю деякі правила для ::placeholderу файл, який ще не має повної підтримки браузера.
::placeholder {
color: #f00;
}
У нашому скомпільованому /style.cssфайлі тепер виводиться наступне:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Тестування поліфілів
Давайте додамо код до нашого /src/sass/style.scssфайлу, щоб перевірити функцію polyfill плагіна PostCSS. Я вставлю деякі правила для allвластивості (які скидають властивості елементів) у файл, який ще не підтримує повну підтримку браузера.
У нашому скомпільованому /style.cssфайлі тепер виводиться наступне:
a {
-webkit-animation: none 0s ease 0s 1 normal none running;
animation: none 0s ease 0s 1 normal none running;
-webkit-backface-visibility: visible;
backface-visibility: visible;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
border: medium none currentColor;
border-collapse: separate;
-o-border-image: none;
border-image: none;
border-radius: 0;
border-spacing: 0;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
caption-side: top;
clear: none;
clip: auto;
color: #000;
-webkit-columns: auto;
-moz-columns: auto;
columns: auto;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
grid-column-gap: normal;
-webkit-column-gap: normal;
-moz-column-gap: normal;
column-gap: normal;
-webkit-column-rule: medium none currentColor;
-moz-column-rule: medium none currentColor;
column-rule: medium none currentColor;
-webkit-column-span: 1;
-moz-column-span: 1;
column-span: 1;
-webkit-column-width: auto;
-moz-column-width: auto;
column-width: auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: inline;
empty-cells: show;
float: none;
font-family: serif;
font-size: medium;
font-style: normal;
font-feature-settings: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
height: auto;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
left: auto;
letter-spacing: normal;
list-style: disc outside none;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
orphans: 2;
outline: medium none invert;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
perspective: none;
perspective-origin: 50% 50%;
position: static;
right: auto;
-moz-tab-size: 8;
-o-tab-size: 8;
tab-size: 8;
table-layout: auto;
text-align: left;
-moz-text-align-last: auto;
text-align-last: auto;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-origin: 50% 50% 0;
transform-style: flat;
transition: none 0s ease 0s;
unicode-bidi: normal;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: auto;
word-spacing: normal;
z-index: auto;
all: initial; }
Тепер це багато CSS!
Зменшення результату
Ми можемо швидше завантажувати ресурси JavaScript і CSS, переконавшись, що вони зменшені. Для цього ми можемо додати пару додаткових плагінів у нашу збірку.
Мінімізація CSS за допомогою webpack
Щоб мінімізувати CSS, ми будемо використовувати optimize-css-assets-webpack-pluginпакет npm.
Переконайтеся, що ви cdввійшли в кореневу папку плагіна, і виконайте таку команду в терміналі:
npm install optimize-css-assets-webpack-plugin --save-dev
Тепер внесіть у свій /webpack.config.jsфайл наступні зміни:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins:() => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
minimize: true,
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ],
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
if (production) {
module.exports.devtool = false;
}
Зверніть увагу на імпорт у рядку 4, ми повідомляємо webpack мінімізувати в рядку 32, а плагін завантажується в рядку 33.
Тепер, коли ми запускаємо npm start, ми можемо перевірити один із наших файлів CSS у корені плагіна, щоб побачити результат. Ось як /style.cssвиглядає зараз:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Він видалив усі коментарі, пробіли та помістив усе в один рядок, що зменшило розмір файлу.
Зменшення JavaScript за допомогою webpack
Якщо ми подивимося на /build/index.jsфайл, він досить великий. Цей файл також можна зменшити.
Для цього ми будемо використовувати terser-webpack-pluginпакет npm.
Переконайтеся, що ви cdввійшли в кореневу папку плагіна, і виконайте таку команду в терміналі:
npm install terser-webpack-plugin --save-dev
Тепер внесіть у свій /webpack.config.jsфайл наступні зміни:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
const TerserWebPackPlugin = require( 'terser-webpack-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
minimize: true,
minimizer: [
new OptimizeCssAssetsWebpackPlugin(),
new TerserWebPackPlugin(),
],
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
if (production) {
module.exports.devtool = false;
}
Зверніть увагу на імпорт у рядку 7 і додавання до мінімізатора в рядку 36.
Тепер, якщо ми перевіримо наш /build/index.jsфайл, JavaScript було зменшено.
Згортання JavaScript
Отримайте суть префікса та мініфікації
Готова конфігурація також містить кілька бонусів. Ось короткий огляд кожного.
Автоматично приведіть у порядок ваш CSS
Ви можете форматувати, автоматично виправляти та наводити порядок у своєму Sass під час роботи, для цього встановіть такі пакети:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Також збережіть наступний файл у вашій конфігурації під назвою .stylelintrc. Це успадковує стандартні параметри, надані stylelint-config-standard, і додає кілька бонусів, включаючи алфавітний порядок.
Ви можете налаштувати цей файл відповідно до своїх уподобань, використовуючи вказівки в документації Styleline.
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"color-hex-length": "long",
"font-family-name-quotes": null,
"function-url-quotes": "always",
"indentation": "tab",
"max-empty-lines": 2,
"number-leading-zero": "never",
"order/order": [
"custom-properties",
"declarations"
],
"order/properties-alphabetical-order": true,
"string-quotes": "single",
}
}
Тепер у вашому /src/editor.scssфайлі зробіть свій Sass трохи безладним і додайте кілька правил тестування, наприклад:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Тепер, коли ви виконуєте npm startнатискання «Зберегти», воно буде автоматично впорядковано та впорядковано таким чином:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Зауважте, що деякі правила, які я додав у свій .stylelintrcфайл, реалізовано, наприклад:
- Використання повних шістнадцяткових значень для кольорів.
- Алфавітне розташування властивостей.
- Одинарні лапки для рядків.
- Застосування лапок для URL-адрес
Отримайте дружні помилки з webpack
Ви можете полегшити читання своїх помилок webpack, встановивши пакет npm friendly-errors-webpack-plugin.
Встановіть плагін у звичайний спосіб із вашим терміналом:
npm install friendly-errors-webpack-plugin --save-dev
Тепер, якщо у вас є помилка у вашому JavaScript, вихід буде набагато зручнішим, ніж раніше.
Перед плагіном:
Після плагіна:
