Ten artykuł opiera się na webpack.config.jspliku, który utworzyliśmy w artykule Extending the WordPress Create Block Script webpack Config. Jeśli nie czytałeś tego artykułu, możesz go szybko przeczytać.
Ten artykuł dotyczy starszej wersji skryptu tworzenia bloku
Chociaż teorię można nadal zastosować, niektóre informacje zawarte w tym artykule mogą nie być już zgodne z najnowszym skryptem tworzenia bloku. Tutaj możesz zapoznać się z naszym zaktualizowanym przewodnikiem tworzenia skryptów blokowych.
Mamy również zaktualizowany przewodnik dotyczący dodawania dodatkowych punktów wejścia do webpacka.
Obsługa przeglądarki krzyżowej CSS za pomocą wypełniaczy i przedrostków
Zanim wskoczymy, chciałbym podziękować Jeffreyowi Carandangowi za jego niesamowity artykuł na temat korzystania z PostCSS z pakietem webpack, do którego zainspirowałem się w tej części artykułu.
Aby obsługiwać wypełniacze i prefiksy Cross-Browser, użyjemy postcss-loaderpakietu npm do załadowania wtyczki [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Upewniając się, że znajdujemy cdsię w katalogu głównym naszej wtyczki, uruchom następujące czynności, aby zainstalować te dwa pakiety.
npm install postcss-loader postcss-preset-env --save-dev
Następnie musimy rozszerzyć naszą /webpack.config.jskonfigurację o konfigurację dla tych dwóch pakietów:
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;
}
Zwróć uwagę na modyfikacje w wierszach 4 i 18.
Testowanie autoprefiksu
Dodajmy trochę kodu do naszego /src/sass/style.scsspliku, aby przetestować funkcję autoprefixera wtyczki PostCSS. Wstawię kilka reguł ::placeholderdo pliku, który nie ma jeszcze pełnej obsługi przeglądarki.
::placeholder {
color: #f00;
}
W naszym skompilowanym /style.csspliku jest teraz wyprowadzane:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Testowanie wypełniaczy
Dodajmy trochę kodu do naszego /src/sass/style.scsspliku, aby przetestować funkcję polyfill wtyczki PostCSS. Wstawię kilka reguł dla allwłaściwości (która resetuje właściwości elementów) do pliku, który nie ma jeszcze pełnej obsługi przeglądarki.
W naszym skompilowanym /style.csspliku jest teraz wyprowadzane:
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; }
To dużo CSS!
Minimalizowanie wyników
Możemy szybciej ładować nasze zasoby JavaScript i CSS, upewniając się, że są one zminimalizowane. Aby to zrobić, możemy dodać do naszej kompilacji kilka dodatkowych wtyczek.
Minifikacja CSS za pomocą webpack
Aby zminimalizować CSS użyjemy optimize-css-assets-webpack-pluginpakietu npm.
Upewnij się, że jesteś cdw katalogu głównym wtyczki i uruchom następujące polecenie w swoim terminalu:
npm install optimize-css-assets-webpack-plugin --save-dev
Teraz dokonaj następujących zmian w swoim /webpack.config.jspliku:
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;
}
Zwróć uwagę na import w wierszu 4, który mówi webpackowi, aby zminimalizował w wierszu 32, a wtyczka jest ładowana w wierszu 33.
Teraz po uruchomieniu npm startmożemy sprawdzić jeden z naszych plików CSS w katalogu głównym wtyczki, aby zobaczyć wynik. Oto jak /style.cssteraz wygląda:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Usunął wszystkie komentarze, spacje i umieścił wszystko w jednym wierszu, co zmniejszyło rozmiar pliku.
Minifikacja JavaScript za pomocą webpack
Jeśli przyjrzymy się /build/index.jsplikowi, jest on dość długi. Ten plik przydałby się również z pewną minifikacją.
W tym celu użyjemy terser-webpack-pluginpakietu npm.
Upewnij się, że jesteś cdw katalogu głównym wtyczki i uruchom następujące polecenie w swoim terminalu:
npm install terser-webpack-plugin --save-dev
Teraz dokonaj następujących zmian w swoim /webpack.config.jspliku:
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;
}
Zwróć uwagę na import w linii 7 i dodanie do minimalizatora w linii 36.
Teraz, jeśli sprawdzimy nasz /build/index.jsplik, JavaScript został zminimalizowany.
Minimalizowanie JavaScript
Pobierz opis prefiksu i minifikacji
Gotowa konfiguracja zawiera również kilka bonusowych dodatków. Oto krótki przegląd każdego z nich.
Automatycznie Lint i Uporządkuj swój CSS
Możesz sformatować, automatycznie naprawić i uporządkować swojego Sassa, aby to zrobić, zainstaluj następujące pakiety:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Zapisz również następujący plik w swojej konfiguracji pod nazwą .stylelintrc. Dziedziczy to wartości domyślne dostarczone przez stylelint-config-standard, i dodaje kilka dodatkowych dodatków, w tym kolejność alfabetyczną.
Możesz skonfigurować ten plik zgodnie z własnymi preferencjami, korzystając ze wskazówek zawartych w dokumentacji 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",
}
}
Teraz w swoim /src/editor.scsspliku zrób swój Sass trochę bałaganu i dodaj kilka reguł testowych, takich jak:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Teraz, gdy uruchomisz npm startzapis trafień, zostanie on automatycznie uporządkowany i uporządkowany alfabetycznie, tak jak poniżej:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Zwróć uwagę, że niektóre z reguł, które dodałem do mojego .stylelintrcpliku, zostały zaimplementowane, takie jak:
- Używanie pełnych wartości szesnastkowych dla kolorów.
- Alfabetyzacja właściwości.
- Pojedyncze cudzysłowy dla ciągów.
- Wymuszanie cudzysłowów dla adresów URL
Uzyskaj przyjazne błędy z pakietu internetowego
Możesz znacznie ułatwić odczytywanie błędów pakietu internetowego, instalując pakiet npm friendly-errors-webpack-plugin.
Zainstaluj wtyczkę w zwykły sposób na swoim terminalu:
npm install friendly-errors-webpack-plugin --save-dev
Teraz, jeśli masz błąd w swoim JavaScript, wynik będzie znacznie bardziej przyjazny niż wcześniej.
Przed wtyczką:
Po wtyczce:
