Configurazione aggiuntiva per il pacchetto web
Questo articolo si basa sul webpack.config.jsfile che abbiamo creato nell’articolo Estensione del pacchetto Web WordPress Create Block Script Config. Se non hai letto quell’articolo, potresti volerlo leggere velocemente.
Questo articolo è per una versione precedente di Crea script di blocco
Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere più compatibili con l’ultimo script create block. È possibile visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui.
Abbiamo anche una guida aggiornata sull’aggiunta di punti di ingresso aggiuntivi al webpack.
Supporto CSS Cross Browser con Polyfill e Prefissi
Prima di entrare, voglio dare credito a Jeffrey Carandang per il suo fantastico articolo sull’uso di PostCSS con webpack, per il quale ho preso ispirazione per questa sezione dell’articolo.
Per supportare i polyfill e i prefissi Cross-Browser useremo il postcss-loaderpacchetto npm per caricare il plugin [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Assicurandoci di essere cd‘ed nella radice del nostro plugin, eseguire quanto segue per installare questi due pacchetti.
npm install postcss-loader postcss-preset-env --save-dev
Successivamente dobbiamo estendere il nostro /webpack.config.jsper includere la configurazione per questi due pacchetti:
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;
}
Notare le modifiche alle righe 4 e 18.
Testare il prefissore automatico
Aggiungiamo del codice al nostro /src/sass/style.scssfile per testare la funzione di prefisso automatico del plug-in PostCSS. Inserirò alcune regole per ::placeholdernel file, che non ha ancora il pieno supporto del browser.
::placeholder {
color: #f00;
}
Nel nostro file compilato /style.cssviene ora emesso quanto segue:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Testare i Polyfill
Aggiungiamo del codice al nostro /src/sass/style.scssfile per testare la funzione polyfill del plugin PostCSS. Inserirò alcune regole per la allproprietà (che ripristina le proprietà di un elemento) nel file, che non ha ancora il supporto completo del browser.
Nel nostro file compilato /style.cssviene ora emesso quanto segue:
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; }
Questo è un sacco di CSS!
Minimizzare l’output
Possiamo caricare le nostre risorse JavaScript e CSS più rapidamente assicurandoci che siano minimizzate. Per fare ciò possiamo aggiungere un paio di plugin extra nella nostra build.
Minimizzare CSS con webpack
Per minimizzare i CSS useremo il optimize-css-assets-webpack-pluginpacchetto npm.
Assicurati di essere cd‘ed nella radice del tuo plugin ed esegui il seguente comando nel tuo terminale:
npm install optimize-css-assets-webpack-plugin --save-dev
Ora apporta le seguenti modifiche al tuo /webpack.config.jsfile:
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;
}
Nota l’importazione sulla riga 4, dicendo al webpack di ridurre a icona sulla riga 32 e il plug-in viene caricato sulla riga 33.
Ora, quando eseguiamo npm start, possiamo esaminare uno dei nostri file CSS nella radice del plugin per vedere l’output. Ecco /style.csscome appare ora:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Ha rimosso tutti i commenti, gli spazi e ha messo tutto su una riga, riducendo le dimensioni del file.
Minimizzare JavaScript con webpack
Se diamo un’occhiata al /build/index.jsfile, è piuttosto lungo. Questo file potrebbe anche fare con una minimizzazione.
Per fare questo useremo il terser-webpack-pluginpacchetto npm.
Assicurati di essere cd‘ed nella radice del tuo plugin ed esegui il seguente comando nel tuo terminale:
npm install terser-webpack-plugin --save-dev
Ora apporta le seguenti modifiche al tuo /webpack.config.jsfile:
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;
}
Notare l’importazione alla riga 7 e l’aggiunta al minimizzatore alla riga 36.
Ora, se ispezioniamo il nostro /build/index.jsfile, JavaScript è stato minimizzato.
Minimizzare il JavaScript
Ottieni il prefisso e la minimizzazione Gist
La configurazione finita contiene anche alcuni extra bonus. Ecco una rapida panoramica di ciascuno.
Elimina e riordina automaticamente i tuoi CSS
Puoi formattare, riparare automaticamente e riordinare il tuo Sass mentre procedi, per fare ciò installa i seguenti pacchetti:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Salva anche il seguente file nella tua configurazione con il nome .stylelintrc. Questo eredita le impostazioni predefinite fornite da stylelint-config-standarde aggiunge alcuni extra bonus, incluso l’ordine alfabetico.
Puoi configurare questo file in base alle tue preferenze utilizzando la guida nella documentazione di 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",
}
}
Ora nel tuo /src/editor.scssfile rendi un po’ disordinato il tuo Sass e aggiungi un paio di regole di test, in questo modo:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Ora, quando npm startesegui il salvataggio, verrà automaticamente ordinato e alfabetizzato in questo modo:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Nota che alcune delle regole che ho aggiunto nel mio .stylelintrcfile sono state implementate, come ad esempio:
- Utilizzo di valori esadecimali completi per i colori.
- Alfabetizzazione delle proprietà.
- Virgolette singole per stringhe.
- Applicare le virgolette per gli URL
Ottieni errori amichevoli dal webpack
È possibile semplificare notevolmente la lettura degli errori del pacchetto web installando il pacchetto npm friendly-errors-webpack-plugin.
Installa il plugin nel solito modo con il tuo terminale:
npm install friendly-errors-webpack-plugin --save-dev
Ora, se hai un errore nel tuo JavaScript, l’output sarà molto più amichevole di prima.
Prima del plugin:
Dopo il plugin:
