Erweiterung der WordPress Create Block Script Webpack-Konfiguration
Mit offizieller Unterstützung des WordPress Editor (Gutenberg)-Teams können Sie jetzt schnell mit einem Block-Plugin loslegen, indem Sie das WordPress Create Block Script (@wordpress/create-blocknpm-Paket) verwenden.
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.
In diesem Artikel untersuchen wir, wie Sie eine benutzerdefinierte Funktion hinzufügen können webpack.config, um die wp-scriptsKompilierungsfunktionalität des vom Block generierten Blocks zu erweitern.
Damit können wir den npm startBefehl erweitern, um zusätzliche Aufgaben auszuführen. In diesem Fall werden wir das Plugin so konfigurieren, dass es Sass (sass, scss) in kompiliert css.
Wir kompilieren den Sass aus dem /srcOrdner in die Dateien style.cssund editor.cssim Stammverzeichnis des Plugins.
Erstellen Sie unsere Sass-Dateien
Als erstes erstellen wir einen neuen Ordner unter /src/scss. Hier fügen wir zwei Dateien hinzu:
/src/scss/editor.scss/src/scss/style.scss
Wir werden die cssaus den /editor.cssund /style.cssDateien in die neu erstellten Dateien kopieren.
Dann werden wir die Dateien /editor.cssund löschen./style.css
SCSS-Dateien und die neue Ordnerstruktur.
Importieren Sie den Sass in/src/index.js
Fügen Sie oben in Ihrem /src/index.jsdie folgenden Anweisungen hinzu:
import './scss/editor.scss';
import './scss/style.scss';
Dadurch kann webpack die .scssDateien abrufen, damit sie verarbeitet werden können.
Indem wir den Sass am Anfang unserer Datei auf diese Weise importieren, können wir den Sass für mehrere Blöcke innerhalb desselben Plugins in einer einzigen Datei kompilieren. In diesem Fall wird es den Sass in einzelne Dateien /editor.cssund /style.cssDateien für das gesamte Plugin kompilieren.
Richten Sie die einwebpack.config
Erstellen Sie eine neue Datei im Stammverzeichnis des Plugins mit dem Namen /webpack.config.js. Kopieren Sie den folgenden Code in diese Datei:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Geben Sie nun in Ihrem Terminal den folgenden Befehl cdein, der in das Stammverzeichnis des Plugins eingefügt wird:
Das Plugin sollte das JavaScript wie gewohnt in den Build-Ordner kompilieren.
Installieren eines Pakets zum Kompilieren von Sass
Wir werden das mini-css-extract-pluginnpm-Paket verwenden, um .cssDateien aus unserem Sass zu erstellen, dazu benötigen wir auch ein paar zusätzliche Pakete, um die .scssDateien zuerst in CSS zu verarbeiten.
Wir werden das scss-loadernpm-Paket installieren, damit wir CSS für Sass kompilieren können. Dies hat eine Abhängigkeit von node-scss.
Wir werden auch das css-loadernpm-Paket installieren, damit wir @importAnweisungen im CSS verarbeiten können.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Erweitern Sie nun die /webpack.config.jsDatei, sodass sie wie folgt aussieht:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
In Zeile 2 haben wir die importiert mini-css-extract-plugin, in Zeile 20 haben wir sie als Plugin deklariert und ../[name].cssals filename. Das bedeutet, dass die kompilierte Datei zum Stammverzeichnis des Plugins hinzugefügt wird.
In Zeile 10 haben wir ein Objekt übergeben, das einen testParameter hat, der eine Regex verwendet, um die Art der Datei anzugeben, nach der wir suchen, und einen useParameter.
Der useParameter enthält ein Array aller Plugins, die wir für diesen Test anwenden werden. Es führt die Plugins vom Ende der Liste aus und endet ganz oben.
Wenn wir es jetzt ausführen npm start, wird eine .cssDatei im Stammverzeichnis des Plugins erstellt.
Generieren einer CSS-Datei.
Wenn wir uns die Dateistruktur ansehen, haben wir zwei zusätzliche Dateien:
/index.css/index.css.map
(Wir bekommen auch ein paar JavaScript-Dateien in den /buildOrdner, aber ich werde später erklären, wie man damit umgeht).
Die .mapDatei ist ein Zeiger, der Ihrer JavaScript-Konsole anzeigt, in welcher Datei CSS oder Sass ursprünglich definiert wurde, und hilft beim Debuggen.
Wenn Sie die /index.cssDatei untersuchen, enthält sie den Code aus den Dateien /src/scss/editor.scssund ./src/scss/style.scss
Das ist nicht das, was wir wollen, da die Style- und Editor-Dateien separat in unsere Plugin-PHP-Datei eingereiht werden.
Aufteilen der CSS-Datei
Um diese /index.cssDatei aufzuteilen, müssen wir das optimization.splitChunksObjekt von Webpack 4 nutzen. Weitere Informationen zu seiner Konfiguration finden Sie auf der Dokumentationsseite von splitChunks.
Fügen Sie Ihrer /webpack.config.jsDatei Folgendes hinzu:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
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,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Löschen Sie die zuvor generierten Dateien und den Build-Ordner und führen Sie npm start.
Wir erhalten nun folgende Dateien:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Betrachten /editor.cssund /style.cssdiese wurden korrekt generiert und enthalten den Code, den wir wollen!
Generieren der Editor- und Style-CSS-Dateien.
Die Dateien im /buildOrdner werden für unser Setup nicht benötigt, ich werde als nächstes untersuchen, wie wir diese entfernen können.
Entfernen unerwünschter Dateien
Um unerwünschte Dateien zu entfernen, verwenden wir das ignore-emit-webpack-pluginnpm-Paket.
Dieses Plugin verhindert, dass Webpack bestimmte Dateien ausgibt (oder „emittiert“).
Installieren Sie das npm-Paket mit dem Terminalbefehl:
npm install ignore-emit-webpack-plugin --save-dev
Ändern Sie Ihre /webpack.config.jsDatei so, dass sie die Konfiguration für das Webpack-Plug-in Ignore Emit enthält.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
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,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Beachten Sie die neuen Verweise in Zeile 2, die das Ignore Emit-Plugin enthält, und in Zeile 41, die dem Plugin mitteilt, welche Dateien nicht ausgegeben werden sollen.
Wenn wir jetzt npm start(nach dem Löschen des /buildOrdners) ausführen, werden die /build/editor.js, /build/editor.js.map, /build/style.jsund /build/style.js.mapnicht mehr erstellt.
Nur Produktionsausgabe
Wenn wir nur das Produkt ausgeben und die .mapDateien ausschließen möchten, können wir einfach devtool: falseeinen Parameter an unser module.exportsObjekt übergeben, wodurch verhindert wird, dass die .mapDateien generiert werden.
Da diese Dateien nur auf einem Produktionsserver ausgeschlossen werden sollen, können wir die process.env.NODE_ENVEinstellung überprüfen, um zu sehen, wie unsere aktuelle Umgebung eingestellt ist, und übergeben, devtool: falsewenn die Umgebung auf Produktion eingestellt ist.
Fügen Sie dazu am Anfang unserer /webpack.config.jsDatei Folgendes hinzu:
const production = 'development' !== process.env.NODE_ENV;
Fügen Sie dann am Ende der Datei Folgendes hinzu:
if (production) {
module.exports.devtool = false;
}
Wenn der npm startBefehl ausgeführt wird und die Knotenumgebung nicht auf Produktion eingestellt ist, werden die .mapDateien nicht erstellt.