Configuração adicional para webpack
Este artigo se baseia no webpack.config.jsarquivo que criamos no artigo Extending the WordPress Create Block Script webpack Config. Se você não leu esse artigo, você pode querer dar-lhe uma leitura rápida.
Este artigo é para uma versão mais antiga do Create Block Script
Embora a teoria ainda possa ser aplicada, algumas das informações neste artigo podem não ser mais compatíveis com o script de bloco de criação mais recente. Você pode ver nosso guia de script de criação de bloco atualizado aqui.
Também temos um guia atualizado sobre como adicionar pontos de entrada adicionais ao webpack.
Suportando CSS Cross Browser com Polyfills e Prefixos
Antes de entrarmos, quero dar crédito a Jeffrey Carandang em seu incrível artigo sobre o uso de PostCSS com webpack, para o qual me inspirei nesta seção do artigo.
Para suportar polyfills e prefixos entre navegadores, usaremos o postcss-loaderpacote npm para carregar o plugin [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Garantindo que estamos cdna raiz do nosso plugin, execute o seguinte para instalar esses dois pacotes.
npm install postcss-loader postcss-preset-env --save-dev
Em seguida, precisamos estender nosso /webpack.config.jspara incluir a configuração desses dois pacotes:
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;
}
Observe as modificações nas linhas 4 e 18.
Testando o prefixo automático
Vamos adicionar algum código ao nosso /src/sass/style.scssarquivo para testar a função autoprefixer do plugin PostCSS. Vou inserir algumas regras para ::placeholderno arquivo, que ainda não tem suporte total ao navegador.
::placeholder {
color: #f00;
}
Em nosso arquivo compilado /style.css, o seguinte é agora gerado:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Testando os Polyfills
Vamos adicionar algum código ao nosso /src/sass/style.scssarquivo para testar a função polyfill do plugin PostCSS. Vou inserir algumas regras para a allpropriedade (que redefine as propriedades de um elemento) no arquivo, que ainda não tem suporte total ao navegador.
Em nosso arquivo compilado /style.css, o seguinte é agora gerado:
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; }
Agora que é um monte de CSS!
Minimizando a saída
Podemos carregar nossos ativos JavaScript e CSS mais rapidamente, garantindo que eles sejam reduzidos. Para fazer isso, podemos adicionar alguns plugins extras ao nosso build.
Minificando CSS com webpack
Para minimizar o CSS vamos usar o optimize-css-assets-webpack-pluginpacote npm.
Certifique-se cdde estar na raiz do seu plugin e execute o seguinte comando no seu terminal:
npm install optimize-css-assets-webpack-plugin --save-dev
Agora faça as seguintes alterações no seu /webpack.config.jsarquivo:
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;
}
Observe a importação na linha 4, nós informando ao webpack para minimizar na linha 32 e o plugin sendo carregado na linha 33.
Agora, quando executamos npm start, podemos examinar um de nossos arquivos CSS na raiz do plugin para ver a saída. Veja como está /style.cssagora:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Ele removeu todos os comentários, espaços e colocou tudo em uma linha, o que reduziu o tamanho do arquivo.
Minimizando JavaScript com webpack
Se dermos uma olhada no /build/index.jsarquivo, ele é bastante longo. Este arquivo também pode fazer com alguma minificação.
Para fazer isso, vamos usar o terser-webpack-pluginpacote npm.
Certifique-se cdde estar na raiz do seu plugin e execute o seguinte comando no seu terminal:
npm install terser-webpack-plugin --save-dev
Agora faça as seguintes alterações no seu /webpack.config.jsarquivo:
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;
}
Observe a importação na linha 7 e a adição ao minimizador na linha 36.
Agora, se inspecionarmos nosso /build/index.jsarquivo, o JavaScript foi reduzido.
Minimizando o JavaScript
Obtenha o Prefixo e Minificação Gist
A configuração final também contém alguns extras de bônus. Aqui está uma rápida visão geral de cada um.
Faça um Lint e Arrume seu CSS Automaticamente
Você pode formatar, corrigir automaticamente e arrumar seu Sass à medida que avança, para isso instale os seguintes pacotes:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Salve também o seguinte arquivo em sua configuração com o nome .stylelintrc. Isso herda os padrões fornecidos por stylelint-config-standarde adiciona alguns extras de bônus, incluindo ordenação alfabética.
Você pode configurar este arquivo de acordo com suas preferências usando a orientação na documentação do 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",
}
}
Agora, em seu /src/editor.scssarquivo, deixe seu Sass um pouco confuso e adicione algumas regras de teste, assim:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Agora, quando você estiver executando npm start, clique em salvar, ele será automaticamente arrumado e em ordem alfabética da seguinte forma:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Observe que algumas das regras que adicionei no meu .stylelintrcarquivo foram implementadas, como:
- Usando valores hexadecimais completos para cores.
- Alfabetização de propriedades.
- Aspas simples para Strings.
- Como aplicar cotações para URLs
Obter erros amigáveis do webpack
Você pode tornar seus erros de webpack muito mais fáceis de ler instalando o pacote npm friendly-errors-webpack-plugin.
Instale o plugin da maneira usual com seu terminal:
npm install friendly-errors-webpack-plugin --save-dev
Agora, se você tiver um erro em seu JavaScript, a saída será muito mais amigável do que antes.
Antes do plug-in:
Após o plug-in:
