Extension de la configuration du pack Web WordPress Create Block Script
Avec le soutien officiel de l’équipe de l’éditeur WordPress (Gutenberg), vous pouvez désormais être rapidement opérationnel avec un plugin de bloc à l’aide du WordPress Create Block Script (@wordpress/create-blockpaquet npm).
Cet article concerne une ancienne version du script de création de bloc
Bien que la théorie puisse toujours être appliquée, certaines des informations contenues dans cet article peuvent ne plus être compatibles avec le dernier script de bloc de création. Vous pouvez consulter notre guide de création de script de bloc mis à jour ici.
Nous avons également un guide mis à jour sur l’ajout de points d’entrée supplémentaires à Webpack.
Dans cet article, nous explorons comment vous pouvez ajouter une personnalisation webpack.configpour étendre la wp-scriptsfonctionnalité de compilation du bloc généré par le bloc.
Avec cela, nous pouvons étendre npm startla commande pour exécuter des tâches supplémentaires. Dans ce cas, nous allons configurer le plugin pour compiler Sass (sass, scss) en css.
Nous allons compiler le Sass du /srcdossier dans les fichiers style.csset editor.cssà la racine du plugin.
Créer nos fichiers Sass
La première chose que nous allons faire est de créer un nouveau dossier dans /src/scss. Ici, nous allons ajouter deux fichiers :
/src/scss/editor.scss/src/scss/style.scss
Nous allons copier les cssfichiers /editor.csset /style.cssdans les fichiers nouvellement créés.
Ensuite, nous supprimerons les fichiers /editor.csset ./style.css
Fichiers SCSS et la nouvelle structure de dossiers.
Importez le Sass dans/src/index.js
En haut de votre /src/index.jsajoutez les déclarations suivantes :
import './scss/editor.scss';
import './scss/style.scss';
Cela permettra à Webpack de récupérer les .scssfichiers afin qu’ils puissent être traités.
En important le Sass en haut de notre fichier de cette manière, cela nous permettra de compiler le Sass pour plusieurs blocs au sein du même plugin dans un seul fichier. Dans ce cas, il compilera le Sass en fichiers uniques /editor.csset /style.csspour l’ensemble du plugin.
Configurez lewebpack.config
Créez un nouveau fichier à la racine du plugin appelé /webpack.config.js. Copiez le code suivant dans ce fichier :
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Maintenant, dans votre terminal, entrez la commande suivante cdà la racine du plugin :
Le plugin doit compiler le JavaScript dans le dossier de construction comme d’habitude.
Installer un paquet pour compiler Sass
Nous allons utiliser le mini-css-extract-pluginpackage npm pour créer .cssdes fichiers à partir de notre Sass. Pour ce faire, nous avons également besoin de quelques packages supplémentaires pour traiter d’ .scssabord les fichiers en CSS.
Nous allons installer le scss-loaderpackage npm, pour nous permettre de compiler CSS en Sass. cela a une dépendance de node-scss.
Nous installerons également le css-loaderpackage npm pour nous permettre de gérer les @importinstructions dans le CSS.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Développez maintenant le /webpack.config.jsfichier pour qu’il ressemble à ceci :
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',
} ),
],
};
À la ligne 2, nous avons importé le mini-css-extract-plugin, à la ligne 20, nous l’avons déclaré en tant que plugin et transmis en ../[name].csstant que filename. Cela signifie que le fichier compilé sera ajouté à la racine du plugin.
À la ligne 10, nous avons passé un objet qui a un testparamètre, qui utilise une expression régulière pour indiquer le type de fichier que nous vérifions et un useparamètre.
Le useparamètre contient un tableau de tous les plugins que nous allons appliquer pour ce test. Il exécute les plugins à partir du bas de la liste, se terminant en haut.
Maintenant, si nous l’exécutons npm start, cela produira un .cssfichier à la racine du plugin.
Génération d’un fichier CSS.
En regardant la structure des fichiers, nous avons deux fichiers supplémentaires :
/index.css/index.css.map
(Nous obtenons également quelques fichiers JavaScript dans le /builddossier, mais j’expliquerai comment les traiter plus tard).
Le .mapfichier est un pointeur qui indique à votre console JavaScript dans quel fichier CSS ou Sass a été défini à l’origine, et aide au débogage.
En examinant le /index.cssfichier, il contient le code des fichiers /src/scss/editor.scsset ./src/scss/style.scss
Ce n’est pas ce que nous voulons, car les fichiers de style et d’éditeur sont mis en file d’attente séparément dans notre fichier php de plugins.
Fractionner le fichier CSS
Pour diviser ce /index.cssfichier, nous devons tirer parti de l’objet de webpack 4 optimization.splitChunks. Pour plus d’informations sur sa configuration, lisez la page de documentation de splitChunks.
Ajoutez ce qui suit à votre /webpack.config.jsfichier :
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',
} ),
],
};
Supprimez les fichiers générés précédemment et le dossier de construction et exécutez npm start.
Nous obtenons maintenant les fichiers suivants :
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Regarder /editor.csset /style.cssceux-ci ont été générés correctement, et contiennent le code que nous voulons !
Génération des fichiers CSS de l’éditeur et du style.
Les fichiers du /builddossier ne sont pas nécessaires pour notre configuration, je vais explorer comment nous pouvons les supprimer ensuite.
Suppression des fichiers indésirables
Pour supprimer les fichiers indésirables, nous allons utiliser le ignore-emit-webpack-pluginpackage npm.
Ce plugin empêche webpack de sortir (ou "d’émettre" certains fichiers).
Installez le package npm avec la commande terminal :
npm install ignore-emit-webpack-plugin --save-dev
Modifiez votre /webpack.config.jsfichier pour inclure la configuration du plug-in Ignore Emit webpack.
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',
} ),
],
};
Notez les nouvelles références à la ligne 2, qui inclut le plugin Ignore Emit, et à la ligne 41 qui indique au plugin quels fichiers ne pas émettre.
Maintenant, lorsque nous exécutons npm start(après avoir supprimé le /builddossier) /build/editor.js, les fichiers /build/editor.js.map, /build/style.jset /build/style.js.mapne sont plus créés.
Sortie de production uniquement
Si nous voulons avoir une sortie de produit uniquement et exclure les .mapfichiers, nous pouvons simplement passer devtool: falseen tant que paramètre dans notre module.exportsobjet, ce qui empêchera la .mapgénération des fichiers.
Étant donné que nous voulons uniquement que ces fichiers soient exclus sur un serveur de production, nous pouvons vérifier le process.env.NODE_ENVparamètre pour voir sur quoi notre environnement actuel est défini et transmettre devtool: falsesi l’environnement est défini sur production.
Pour ce faire, ajoutez ce qui suit en haut de notre /webpack.config.jsfichier :
const production = 'development' !== process.env.NODE_ENV;
Ajoutez ensuite ce qui suit au bas du fichier :
if (production) {
module.exports.devtool = false;
}
Si la npm startcommande est exécutée et que l’environnement de nœud n’est pas défini sur production, les .mapfichiers ne seront pas créés.