Configuration supplémentaire pour webpack
Cet article s’appuie sur le webpack.config.jsfichier que nous avons créé dans l’article Extending the WordPress Create Block Script webpack Config. Si vous n’avez pas lu cet article, vous voudrez peut-être lui donner une lecture rapide.
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.
Avant de nous lancer, je tiens à rendre hommage à Jeffrey Carandang pour son article génial sur l’utilisation de PostCSS avec webpack, pour lequel je me suis inspiré pour cette section de l’article.
Pour prendre en charge les polyfills et les préfixes Cross-Browser, nous allons utiliser le postcss-loaderpackage npm pour charger le plugin [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
En vous assurant que nous sommes cdà la racine de notre plugin, exécutez ce qui suit pour installer ces deux packages.
npm install postcss-loader postcss-preset-env --save-dev
Ensuite, nous devons étendre notre /webpack.config.jspour inclure la configuration de ces deux packages :
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;
}
Notez les modifications aux lignes 4 et 18.
Tester le préfixe automatique
Ajoutons du code à notre /src/sass/style.scssfichier pour tester la fonction autoprefixer du plugin PostCSS. Je vais insérer quelques règles ::placeholderdans le fichier, qui n’est pas encore entièrement compatible avec le navigateur.
::placeholder {
color: #f00;
}
Dans notre fichier compilé /style.css, ce qui suit est maintenant sorti :
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Tester les polyfills
Ajoutons du code à notre /src/sass/style.scssfichier pour tester la fonction polyfill du plugin PostCSS. J’insérerai quelques règles pour la allpropriété (qui réinitialise les propriétés d’un élément) dans le fichier, qui n’a pas encore de prise en charge complète du navigateur.
Dans notre fichier compilé /style.css, ce qui suit est maintenant sorti :
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; }
Ça fait beaucoup de CSS !
Minification de la sortie
Nous pouvons charger nos actifs JavaScript et CSS plus rapidement en nous assurant qu’ils sont minifiés. Pour ce faire, nous pouvons ajouter quelques plugins supplémentaires dans notre build.
Minifier CSS avec webpack
Pour minifier le CSS, nous allons utiliser le optimize-css-assets-webpack-pluginpackage npm.
Assurez-vous cdd’être connecté à la racine de votre plugin et exécutez la commande suivante dans votre terminal :
npm install optimize-css-assets-webpack-plugin --save-dev
Apportez maintenant les modifications suivantes à votre /webpack.config.jsfichier :
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;
}
Notez l’importation à la ligne 4, nous disant à webpack de minimiser à la ligne 32, et le plugin en cours de chargement à la ligne 33.
Maintenant, lorsque nous exécutons, npm startnous pouvons examiner l’un de nos fichiers CSS à la racine du plugin pour voir la sortie. Voici à quoi /style.cssressemble maintenant :
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Il a supprimé tous les commentaires, les espaces et tout mis sur une seule ligne, ce qui a réduit la taille du fichier.
Minimiser JavaScript avec webpack
Si on regarde le /build/index.jsdossier, il est assez long. Ce fichier pourrait également faire l’objet d’une minification.
Pour ce faire, nous allons utiliser le terser-webpack-pluginpackage npm.
Assurez-vous cdd’être connecté à la racine de votre plugin et exécutez la commande suivante dans votre terminal :
npm install terser-webpack-plugin --save-dev
Apportez maintenant les modifications suivantes à votre /webpack.config.jsfichier :
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;
}
Notez l’importation à la ligne 7 et l’ajout au minimiseur à la ligne 36.
Maintenant, si nous inspectons notre /build/index.jsfichier, le JavaScript a été minifié.
Minimiser le JavaScript
Obtenez le préfixe et l’essentiel de la minification
La configuration finale contient également quelques extras bonus. Voici un aperçu rapide de chacun.
Lint et range automatiquement votre CSS
Vous pouvez formater, réparer automatiquement et ranger votre Sass au fur et à mesure, pour ce faire installez les packages suivants :
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Enregistrez également le fichier suivant dans votre configuration avec le nom .stylelintrc. Cela hérite des valeurs par défaut fournies par stylelint-config-standard, et ajoute quelques bonus supplémentaires, y compris l’ordre alphabétique.
Vous pouvez configurer ce fichier selon vos préférences en suivant les instructions de la documentation 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",
}
}
Maintenant, dans votre /src/editor.scssfichier, rendez votre Sass un peu désordonné et ajoutez quelques règles de test, comme ceci :
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Maintenant, lorsque vous lancez la npm startsauvegarde, il sera automatiquement rangé et classé par ordre alphabétique comme suit :
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Notez que certaines des règles que j’ai ajoutées dans mon .stylelintrcfichier ont été implémentées, telles que :
- Utilisation des valeurs hexadécimales complètes pour les couleurs.
- Classement alphabétique des biens.
- Guillemets simples pour les chaînes.
- Application de guillemets pour les URL
Obtenez des erreurs conviviales à partir de Webpack
Vous pouvez rendre vos erreurs webpack beaucoup plus faciles à lire en installant le package npm friendly-errors-webpack-plugin.
Installez le plugin de la manière habituelle avec votre terminal :
npm install friendly-errors-webpack-plugin --save-dev
Maintenant, si vous avez une erreur dans votre JavaScript, la sortie sera beaucoup plus conviviale qu’auparavant.
Avant le plug-in :
Après le plugin :
