Configuración adicional para webpack
Este artículo se basa en el webpack.config.jsarchivo que creamos en el artículo Ampliación de la configuración del paquete web de WordPress Create Block Script. Si no ha leído ese artículo, es posible que desee leerlo rápidamente.
Este artículo es para una versión anterior de Create Block Script
Aunque la teoría aún se puede aplicar, es posible que parte de la información de este artículo ya no sea compatible con el último script de creación de bloques. Puede ver nuestra guía actualizada de creación de secuencias de comandos de bloques aquí.
También tenemos una guía actualizada sobre cómo agregar puntos de entrada adicionales al paquete web.
Compatibilidad con CSS Cross Browser con Polyfills y Prefixes
Antes de comenzar, quiero dar crédito a Jeffrey Carandang por su increíble artículo sobre el uso de PostCSS con webpack, en el que me inspiré para esta sección del artículo.
Para admitir polyfills y prefijos de navegadores cruzados, usaremos el postcss-loaderpaquete npm para cargar el complemento [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Asegurándose de que estamos cden la raíz de nuestro complemento, ejecute lo siguiente para instalar estos dos paquetes.
npm install postcss-loader postcss-preset-env --save-dev
A continuación, debemos ampliar nuestro /webpack.config.jspara incluir la configuración de estos dos paquetes:
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;
}
Tenga en cuenta las modificaciones en las líneas 4 y 18.
Probando el Autoprefixer
Agreguemos algo de código a nuestro /src/sass/style.scssarchivo para probar la función de autoprefixer del complemento PostCSS. Insertaré algunas reglas ::placeholderen el archivo, que aún no tiene compatibilidad completa con el navegador.
::placeholder {
color: #f00;
}
En nuestro archivo compilado /style.cssahora se muestra lo siguiente:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Probando los Polyfills
Agreguemos algo de código a nuestro /src/sass/style.scssarchivo para probar la función polyfill del complemento PostCSS. Insertaré algunas reglas para la allpropiedad (que restablece las propiedades de los elementos) en el archivo, que aún no tiene soporte completo para el navegador.
En nuestro archivo compilado /style.cssahora se muestra lo siguiente:
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; }
¡Eso es mucho CSS!
Minimizar la salida
Podemos cargar nuestros activos de JavaScript y CSS más rápido asegurándonos de que estén minimizados. Para hacer esto, podemos agregar un par de complementos adicionales en nuestra compilación.
Minimizar CSS con webpack
Para minimizar CSS vamos a usar el optimize-css-assets-webpack-pluginpaquete npm.
Asegúrese cdde ingresar a la raíz de su complemento y ejecute el siguiente comando en su terminal:
npm install optimize-css-assets-webpack-plugin --save-dev
Ahora haga las siguientes modificaciones en su /webpack.config.jsarchivo:
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;
}
Tenga en cuenta la importación en la línea 4, le indicamos a webpack que minimice en la línea 32 y el complemento se carga en la línea 33.
Ahora, cuando ejecutamos npm start, podemos examinar uno de nuestros archivos CSS en la raíz del complemento para ver el resultado. Así es /style.csscomo se ve el ahora:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Ha eliminado todos los comentarios, espacios y ha puesto todo en una sola línea, lo que ha reducido el tamaño del archivo.
Minimizar JavaScript con webpack
Si echamos un vistazo al /build/index.jsarchivo, es bastante extenso. A este archivo también le vendría bien algo de minificación.
Para ello vamos a utilizar el terser-webpack-pluginpaquete npm.
Asegúrese cdde ingresar a la raíz de su complemento y ejecute el siguiente comando en su terminal:
npm install terser-webpack-plugin --save-dev
Ahora haga las siguientes modificaciones en su /webpack.config.jsarchivo:
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;
}
Tenga en cuenta la importación en la línea 7 y la adición al minimizador en la línea 36.
Ahora, si inspeccionamos nuestro /build/index.jsarchivo, el JavaScript se ha minimizado.
Minimizando el JavaScript
Obtenga el prefijo y la esencia de la minificación
La configuración final también contiene algunos extras adicionales. Aquí hay una descripción general rápida de cada uno.
Limpia y ordena automáticamente tu CSS
Puede formatear, corregir automáticamente y ordenar su Sass a medida que avanza, para hacer esto, instale los siguientes paquetes:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
También guarde el siguiente archivo en su configuración con el nombre .stylelintrc. Esto hereda los valores predeterminados proporcionados por stylelint-config-standardy agrega algunos extras adicionales, incluido el orden alfabético.
Puede configurar este archivo según sus preferencias siguiendo las instrucciones de la documentación de 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",
}
}
Ahora, en su /src/editor.scssarchivo, haga que su Sass sea un poco desordenado y agregue un par de reglas de prueba, así:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Ahora, cuando esté ejecutando npm start, presione guardar, se ordenará automáticamente y se ordenará alfabéticamente de la siguiente manera:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
.stylelintrcTenga en cuenta que se han implementado algunas de las reglas que agregué en mi archivo, como:
- Uso de valores hexadecimales completos para los colores.
- Alfabetización de propiedades.
- Comillas simples para cadenas.
- Aplicación de comillas para direcciones URL
Obtenga errores amistosos del paquete web
Puede hacer que los errores de su paquete web sean mucho más fáciles de leer instalando el paquete npm friendly-errors-webpack-plugin.
Instale el complemento de la forma habitual con su terminal:
npm install friendly-errors-webpack-plugin --save-dev
Ahora, si tiene un error en su JavaScript, la salida será mucho más amigable que antes.
Antes del complemento:
Después del complemento:
