Zusätzliche Konfiguration für Webpack
Dieser Artikel baut auf der webpack.config.jsDatei auf, die wir im Artikel Extending the WordPress Create Block Script webpack Config erstellt haben. Wenn Sie diesen Artikel noch nicht gelesen haben, sollten Sie ihn vielleicht schnell lesen.
Dieser Artikel bezieht sich auf eine ältere Version des Create Block Scripts
Obwohl die Theorie immer noch angewendet werden kann, sind einige der Informationen in diesem Artikel möglicherweise nicht mehr mit dem neuesten Erstellungsblockskript kompatibel. Sie können unseren aktualisierten Leitfaden zum Erstellen von Blockskripten hier einsehen.
Wir haben auch eine aktualisierte Anleitung zum Hinzufügen zusätzlicher Einstiegspunkte zum Webpack.
Unterstützung von CSS Cross Browser mit Polyfills und Präfixen
Bevor wir einsteigen, möchte ich Jeffrey Carandang für seinen großartigen Artikel über die Verwendung von PostCSS mit Webpack Anerkennung zollen, für den ich mich für diesen Abschnitt des Artikels inspirieren ließ.
Um Polyfills und Cross-Browser-Präfixe zu unterstützen, werden wir das postcss-loadernpm-Paket verwenden, um das Plugin zu laden [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Stellen Sie sicher, dass wir cdin das Stammverzeichnis unseres Plugins eingebunden sind, und führen Sie Folgendes aus, um diese beiden Pakete zu installieren.
npm install postcss-loader postcss-preset-env --save-dev
Als nächstes müssen wir unsere erweitern /webpack.config.js, um die Konfiguration für diese beiden Pakete einzuschließen:
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;
}
Beachten Sie die Änderungen in den Zeilen 4 und 18.
Testen des Autoprefixers
Fügen wir unserer /src/sass/style.scssDatei etwas Code hinzu, um die Autoprefixer-Funktion des PostCSS-Plugins zu testen. Ich werde einige Regeln für in die Datei einfügen ::placeholder, die noch nicht die volle Browserunterstützung hat.
::placeholder {
color: #f00;
}
In unserer kompilierten /style.cssDatei wird nun folgendes ausgegeben:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Testen der Polyfills
Lassen Sie uns etwas Code zu unserer /src/sass/style.scssDatei hinzufügen, um die Polyfill-Funktion des PostCSS-Plugins zu testen. Ich werde einige Regeln für die Eigenschaft (die die Eigenschaften eines Elements zurücksetzt) in die Datei einfügen all, die noch keine vollständige Browserunterstützung hat.
In unserer kompilierten /style.cssDatei wird nun folgendes ausgegeben:
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; }
Nun, das ist eine Menge CSS!
Minimieren der Ausgabe
Wir können unsere JavaScript- und CSS-Assets schneller laden, indem wir sicherstellen, dass sie minimiert sind. Dazu können wir unserem Build ein paar zusätzliche Plugins hinzufügen.
CSS mit Webpack minimieren
Um CSS zu minimieren, werden wir das optimize-css-assets-webpack-pluginnpm-Paket verwenden .
Stellen Sie sicher, dass Sie cdin das Stammverzeichnis Ihres Plugins eingeloggt sind, und führen Sie den folgenden Befehl in Ihrem Terminal aus:
npm install optimize-css-assets-webpack-plugin --save-dev
Nehmen Sie nun die folgenden Änderungen an Ihrer /webpack.config.jsDatei vor:
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;
}
Beachten Sie den Import in Zeile 4, in Zeile 32 teilen wir webpack mit, es zu minimieren, und in Zeile 33 wird das Plugin geladen.
Wenn wir es jetzt ausführen npm start, können wir eine unserer CSS-Dateien im Stammverzeichnis des Plugins untersuchen, um die Ausgabe zu sehen. /style.cssSo sieht das jetzt aus:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Es hat alle Kommentare und Leerzeichen entfernt und alles in eine Zeile gestellt, wodurch die Größe der Datei reduziert wurde.
JavaScript mit Webpack minimieren
Wenn wir uns die /build/index.jsDatei ansehen, ist sie ziemlich lang. Diese Datei könnte auch eine gewisse Verkleinerung vertragen.
Dazu verwenden wir das terser-webpack-pluginPaket npm.
Stellen Sie sicher, dass Sie cdin das Stammverzeichnis Ihres Plugins eingeloggt sind, und führen Sie den folgenden Befehl in Ihrem Terminal aus:
npm install terser-webpack-plugin --save-dev
Nehmen Sie nun die folgenden Änderungen an Ihrer /webpack.config.jsDatei vor:
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;
}
Beachten Sie den Import in Zeile 7 und die Hinzufügung zum Minimierer in Zeile 36.
Wenn wir nun unsere /build/index.jsDatei untersuchen, wurde das JavaScript minimiert.
Minimierung des JavaScripts
Holen Sie sich das Präfix und die Minimierung Gist
Die fertige Konfiguration enthält außerdem noch ein paar Bonus-Extras. Hier ist jeweils ein kurzer Überblick.
Lassen Sie Ihr CSS automatisch fusseln und aufräumen
Sie können Ihren Sass unterwegs formatieren, automatisch reparieren und aufräumen. Installieren Sie dazu die folgenden Pakete:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Speichern Sie auch die folgende Datei in Ihrer Konfiguration mit dem Namen .stylelintrc. Dies erbt die von bereitgestellten Standardeinstellungen stylelint-config-standardund fügt einige Bonus-Extras hinzu, einschließlich der alphabetischen Reihenfolge.
Sie können diese Datei nach Ihren Wünschen konfigurieren, indem Sie die Anleitung in der Styleline-Dokumentation verwenden .
{
"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",
}
}
Machen Sie jetzt in Ihrer /src/editor.scssDatei Ihren Sass ein wenig chaotisch und fügen Sie ein paar Testregeln hinzu, wie folgt:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Wenn Sie jetzt npm startauf Speichern klicken, wird es automatisch aufgeräumt und alphabetisch sortiert:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Beachten Sie, dass einige der Regeln, die ich in meiner .stylelintrcDatei hinzugefügt habe, implementiert wurden, wie zum Beispiel:
- Vollständige Hex-Werte für Farben verwenden.
- Alphabetisierung von Eigenschaften.
- Einfache Anführungszeichen für Zeichenfolgen.
- Anführungszeichen für URLs erzwingen
Holen Sie sich freundliche Fehler aus dem Webpack
Sie können Ihre Webpack-Fehler viel leichter lesbar machen, indem Sie das npm-Paket installieren friendly-errors-webpack-plugin.
Installieren Sie das Plugin wie gewohnt mit Ihrem Endgerät:
npm install friendly-errors-webpack-plugin --save-dev
Wenn Sie jetzt einen Fehler in Ihrem JavaScript haben, ist die Ausgabe viel freundlicher als zuvor.
Vor dem Plugin:
Nach dem Plugin:
