Estendendo a configuração do webpack do WordPress Create Block Script

Com o suporte oficial da equipe do WordPress Editor (Gutenberg), agora você pode começar a usar rapidamente um plug-in de bloco usando o WordPress Create Block Script (@wordpress/create-blockpacote npm).

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.

Neste artigo, exploramos como você pode adicionar um personalizado webpack.configpara expandir a wp-scriptsfuncionalidade de compilação do bloco gerado pelo bloco.

Com isso, podemos expandir o npm startcomando para executar tarefas adicionais. Neste caso vamos configurar o plugin para compilar Sass (sass, scss) em css.

Vamos compilar o Sass da /srcpasta para os arquivos style.csse editor.cssna raiz do plugin.

Crie nossos arquivos Sass

A primeira coisa que vamos fazer é criar uma nova pasta em /src/scss. Aqui vamos adicionar dois arquivos:

• /src/scss/editor.scss
• /src/scss/style.scss

Vamos copiar os cssarquivos /editor.csse /style.csspara os arquivos recém-criados.

Em seguida, excluiremos os arquivos /editor.csse ./style.css

Arquivos SCSS e a nova estrutura de pastas.

Importe o Sass para/src/index.js

No topo do seu /src/index.jsadicione as seguintes declarações:

import './scss/editor.scss';
import './scss/style.scss';

Isso permitirá que o webpack colete os .scssarquivos para que possam ser processados.

Ao importar o Sass no topo do nosso arquivo desta forma, ele nos permitirá compilar o Sass para vários blocos dentro do mesmo plugin em um único arquivo. Nesse caso, ele compilará o Sass em um único /editor.csse /style.cssem arquivos para todo o plug-in.

Configure owebpack.config

Crie um novo arquivo na raiz do plugin chamado /webpack.config.js. Copie o seguinte código para esse arquivo:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
        ]
    }
};

Agora no seu terminal digite o seguinte comando cd‘ed na raiz do plugin:

O plug-in deve compilar o JavaScript na pasta de compilação normalmente.

Instalando um pacote para compilar Sass

Vamos usar o mini-css-extract-pluginpacote npm para criar .cssarquivos do nosso Sass, para fazer isso também precisamos de alguns pacotes adicionais para processar os .scssarquivos em CSS primeiro.

Vamos instalar o scss-loaderpacote npm, para nos permitir compilar CSS para Sass. isso tem uma dependência de node-scss.

Também instalaremos o css-loaderpacote npm para nos permitir lidar com @importinstruções no CSS.

npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev

Agora estenda o /webpack.config.jsarquivo para que fique assim:

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',
        } ),
    ],
};

Na linha 2 importamos o mini-css-extract-plugin, na linha 20 o declaramos como um plugin e passamos ../[name].csscomo o filename. Isso significa que o arquivo compilado será adicionado à raiz do plugin.

Na linha 10 passamos um objeto que tem um testparâmetro, que usa um regex para indicar o tipo de arquivo que estamos verificando e um useparâmetro.

O useparâmetro contém uma matriz de todos os plugins que vamos aplicar para esse teste. Ele executa os plugins da parte inferior da lista, terminando no topo.

Agora, se executarmos npm start, ele produzirá um .cssarquivo na raiz do plugin.

Gerando um arquivo CSS.

Observando a estrutura do arquivo, temos dois arquivos adicionais:

• /index.css
• /index.css.map

(Também temos alguns arquivos JavaScript na /buildpasta, mas explicarei como lidar com eles mais tarde).

O .maparquivo é um ponteiro que indica ao seu console JavaScript em qual arquivo algum CSS ou Sass foi originalmente definido e ajuda na depuração.

Examinando o /index.cssarquivo, ele contém o código dos arquivos /src/scss/editor.scsse ./src/scss/style.scss

Isso não é o que queremos, pois os arquivos de estilo e editor são enfileirados separadamente em nosso arquivo php de plugins.

Dividindo o arquivo CSS

Para dividir este /index.cssarquivo precisamos aproveitar o optimization.splitChunksobjeto do webpack 4. Para obter mais informações sobre sua configuração, leia a página de documentação do splitChunks.

Adicione o seguinte ao seu /webpack.config.jsarquivo:

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',
        } ),
    ],
};

Exclua os arquivos gerados anteriormente e a pasta de compilação e execute npm start.

Agora temos os seguintes arquivos:

• /build/editor.js
• /build/editor.js.map
• /build/style.js
• /build/style.js.map
• /editor.css
• /editor.css.map
• /style.css
• /style.css.map

Olhando /editor.csse /style.cssestes foram gerados corretamente, e contém o código que queremos!

Gerando o editor e arquivos CSS de estilo.

Os arquivos na /buildpasta não são necessários para nossa configuração, explorarei como podemos removê-los a seguir.

Removendo arquivos indesejados

Para remover arquivos indesejados, vamos usar o ignore-emit-webpack-pluginpacote npm.

Este plugin impede que o webpack produza (ou ‘emita’ certos arquivos).

Instale o pacote npm com o comando terminal:

npm install ignore-emit-webpack-plugin --save-dev

Modifique seu /webpack.config.jsarquivo para incluir a configuração do 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',
        } ),
    ],
};

Observe as novas referências na linha 2, que inclui o plug-in Ignore Emit, e na linha 41, que informa ao plug-in quais arquivos não devem ser emitidos.

Agora quando executamos npm start(depois de deletar a /buildpasta) os /build/editor.js, /build/editor.js.map, /build/style.jse /build/style.js.mapnão são mais criados.

Saída Somente Produção

Se quisermos que apenas o produto produza e exclua os .maparquivos, podemos simplesmente passar devtool: falsecomo parâmetro em nosso module.exportsobjeto, e isso impedirá que os .maparquivos sejam gerados.

Como queremos apenas que esses arquivos sejam excluídos em um servidor de produção, podemos verificar a process.env.NODE_ENVconfiguração para ver como nosso ambiente atual está definido e passar devtool: falsese o ambiente estiver definido para produção.

Para fazer isso, adicione o seguinte ao topo do nosso /webpack.config.jsarquivo:

const production = 'development' !== process.env.NODE_ENV;

Em seguida, adicione o seguinte na parte inferior do arquivo:

if (production) {
    module.exports.devtool = false;
}

Se o npm startcomando for executado e o ambiente do nó não estiver configurado para produção, os .maparquivos não serão criados.