Дополнительная конфигурация для веб-пакета
Эта статья основана на webpack.config.jsфайле, который мы создали в статье «Расширение конфигурации веб-пакета WordPress Create Block Script». Если вы не читали эту статью, вы можете быстро прочитать ее.
Эта статья предназначена для более старой версии скрипта создания блока.
Хотя теорию все еще можно применять, некоторая информация в этой статье может быть несовместима с последним скриптом создания блока. Вы можете просмотреть наше обновленное Руководство по созданию скриптов блоков здесь.
У нас также есть обновленное руководство по добавлению дополнительных точек входа в webpack.
Поддержка CSS Cross Browser с полифиллами и префиксами
Прежде чем мы перейдем к делу, я хочу отдать должное Джеффри Карандангу за его замечательную статью об использовании 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файл, чтобы протестировать функцию полифилла плагина 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, мы сообщаем веб-пакету о необходимости свернуть в строке 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
Получить дружественные ошибки из веб-пакета
Вы можете значительно упростить чтение ошибок веб-пакета, установив пакет npm friendly-errors-webpack-plugin.
Установите плагин обычным способом с вашим терминалом:
npm install friendly-errors-webpack-plugin --save-dev
Теперь, если у вас есть ошибка в вашем JavaScript, вывод будет намного более удобным, чем раньше.
До плагина:
После плагина:
