{"id":228720,"date":"2022-10-15T18:21:00","date_gmt":"2022-10-15T15:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228720"},"modified":"2022-11-09T04:00:49","modified_gmt":"2022-11-09T01:00:49","slug":"estendendo-a-configuracao-do-webpack-do-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/estendendo-a-configuracao-do-webpack-do-wordpress-create-block-script\/","title":{"rendered":"Estendendo a configura\u00e7\u00e3o do webpack do WordPress Create Block Script"},"content":{"rendered":"\n<p>Com o suporte oficial da equipe do WordPress Editor (Gutenberg), agora voc\u00ea pode come\u00e7ar a usar rapidamente um plug-in de bloco usando o <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Create Block Script<\/a> (<code>@wordpress\/create-block<\/code>pacote npm).<\/p>\n<p><strong>Este artigo \u00e9 para uma vers\u00e3o mais antiga do Create Block Script<\/strong><\/p>\n<p>Embora a teoria ainda possa ser aplicada, algumas das informa\u00e7\u00f5es neste artigo podem n\u00e3o ser mais compat\u00edveis com o script de bloco de cria\u00e7\u00e3o mais recente. Voc\u00ea pode <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nosso guia de script de cria\u00e7\u00e3o de bloco atualizado aqui<\/a>.<\/p>\n<p>Tamb\u00e9m temos um guia atualizado sobre como <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionar pontos de entrada adicionais ao webpack<\/a>.<\/p>\n<p>Neste artigo, exploramos como voc\u00ea pode adicionar um personalizado <code>webpack.config<\/code>para expandir a <code>wp-scripts<\/code>funcionalidade de compila\u00e7\u00e3o do bloco gerado pelo bloco.<\/p>\n<p>Com isso, podemos expandir o <code>npm start<\/code>comando para executar tarefas adicionais. Neste caso vamos configurar o plugin para compilar Sass (<code>sass<\/code>, <code>scss<\/code>) em <code>css<\/code>.<\/p>\n<p>Vamos compilar o Sass da <code>\/src<\/code>pasta para os arquivos <code>style.css<\/code>e <code>editor.css<\/code>na raiz do plugin.<\/p>\n<h2>Crie nossos arquivos Sass<\/h2>\n<p>A primeira coisa que vamos fazer \u00e9 criar uma nova pasta em <code>\/src\/scss<\/code>. Aqui vamos adicionar dois arquivos:<\/p>\n<ul>\n<li><code>\/src\/scss\/editor.scss<\/code><\/li>\n<li><code>\/src\/scss\/style.scss<\/code><\/li>\n<\/ul>\n<p>Vamos copiar os <code>css<\/code>arquivos <code>\/editor.css<\/code>e <code>\/style.css<\/code>para os arquivos rec\u00e9m-criados.<\/p>\n<p>Em seguida, excluiremos os arquivos <code>\/editor.css<\/code>e .<code>\/style.css<\/code><\/p>\n<p>Arquivos SCSS e a nova estrutura de pastas.<\/p>\n<h3>Importe o Sass para<code>\/src\/index.js<\/code><\/h3>\n<p>No topo do seu <code>\/src\/index.js<\/code>adicione as seguintes declara\u00e7\u00f5es:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Isso permitir\u00e1 que o webpack colete os <code>.scss<\/code>arquivos para que possam ser processados.<\/p>\n<p>Ao importar o Sass no topo do nosso arquivo desta forma, ele nos permitir\u00e1 <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compilar o Sass para v\u00e1rios blocos dentro do mesmo plugin em um \u00fanico arquivo<\/a>. Nesse caso, ele compilar\u00e1 o Sass em um \u00fanico <code>\/editor.css<\/code>e <code>\/style.css<\/code>em arquivos para todo o plug-in.<\/p>\n<h2>Configure o<code>webpack.config<\/code><\/h2>\n<p>Crie um novo arquivo na raiz do plugin chamado <code>\/webpack.config.js<\/code>. Copie o seguinte c\u00f3digo para esse arquivo:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n        ]\n    }\n};\n<\/code><\/pre>\n<p>Agora no seu terminal digite o seguinte comando <code>cd<\/code>&#8216;ed na raiz do plugin:<\/p>\n<p>O plug-in deve compilar o JavaScript na pasta de compila\u00e7\u00e3o normalmente.<\/p>\n<h3>Instalando um pacote para compilar Sass<\/h3>\n<p>Vamos usar o <a href=\"https:\/\/www.npmjs.com\/package\/mini-css-extract-plugin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>mini-css-extract-plugin<\/code>pacote npm<\/a> para criar <code>.css<\/code>arquivos do nosso Sass, para fazer isso tamb\u00e9m precisamos de alguns pacotes adicionais para processar os <code>.scss<\/code>arquivos em CSS primeiro.<\/p>\n<p>Vamos instalar o <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>pacote npm<\/a>, para nos permitir compilar CSS para Sass. isso tem uma depend\u00eancia de <code>node-scss<\/code>.<\/p>\n<p>Tamb\u00e9m instalaremos o <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>pacote npm<\/a> para nos permitir lidar com <code>@import<\/code>instru\u00e7\u00f5es no CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>Agora estenda o <code>\/webpack.config.js<\/code>arquivo para que fique assim:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Na linha 2 importamos o <code>mini-css-extract-plugin<\/code>, na linha 20 o declaramos como um plugin e passamos <code>..\/[name].css<\/code>como o <code>filename<\/code>. Isso significa que o arquivo compilado ser\u00e1 adicionado \u00e0 raiz do plugin.<\/p>\n<p>Na linha 10 passamos um objeto que tem um <code>test<\/code>par\u00e2metro, que usa um regex para indicar o tipo de arquivo que estamos verificando e um <code>use<\/code>par\u00e2metro.<\/p>\n<p>O <code>use<\/code>par\u00e2metro cont\u00e9m uma matriz de todos os plugins que vamos aplicar para esse teste. Ele executa os plugins da parte inferior da lista, terminando no topo.<\/p>\n<p>Agora, se executarmos <code>npm start<\/code>, ele produzir\u00e1 um <code>.css<\/code>arquivo na raiz do plugin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Estendendo a configura\u00e7\u00e3o do webpack do WordPress Create Block Script\" \/>Gerando um arquivo CSS.<\/p>\n<p>Observando a estrutura do arquivo, temos dois arquivos adicionais:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Tamb\u00e9m temos alguns arquivos JavaScript na <code>\/build<\/code>pasta, mas explicarei como lidar com eles mais tarde).<\/p>\n<p>O <code>.map<\/code>arquivo \u00e9 um ponteiro que indica ao seu console JavaScript em qual arquivo algum CSS ou Sass foi originalmente definido e ajuda na depura\u00e7\u00e3o.<\/p>\n<p>Examinando o <code>\/index.css<\/code>arquivo, ele cont\u00e9m o c\u00f3digo dos arquivos <code>\/src\/scss\/editor.scss<\/code>e .<code>\/src\/scss\/style.scss<\/code><\/p>\n<p>Isso n\u00e3o \u00e9 o que queremos, pois os arquivos de estilo e editor s\u00e3o enfileirados separadamente em nosso arquivo php de plugins.<\/p>\n<h3>Dividindo o arquivo CSS<\/h3>\n<p>Para dividir este <code>\/index.css<\/code>arquivo precisamos aproveitar o <code>optimization.splitChunks<\/code>objeto do webpack 4. Para obter mais informa\u00e7\u00f5es sobre sua configura\u00e7\u00e3o, leia a <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de documenta\u00e7\u00e3o do splitChunks<\/a>.<\/p>\n<p>Adicione o seguinte ao seu <code>\/webpack.config.js<\/code>arquivo:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Exclua os arquivos gerados anteriormente e a pasta de compila\u00e7\u00e3o e execute <code>npm start<\/code>.<\/p>\n<p>Agora temos os seguintes arquivos:<\/p>\n<ul>\n<li><code>\/build\/editor.js<\/code><\/li>\n<li><code>\/build\/editor.js.map<\/code><\/li>\n<li><code>\/build\/style.js<\/code><\/li>\n<li><code>\/build\/style.js.map<\/code><\/li>\n<li><code>\/editor.css<\/code><\/li>\n<li><code>\/editor.css.map<\/code><\/li>\n<li><code>\/style.css<\/code><\/li>\n<li><code>\/style.css.map<\/code><\/li>\n<\/ul>\n<p>Olhando <code>\/editor.css<\/code>e <code>\/style.css<\/code>estes foram gerados corretamente, e cont\u00e9m o c\u00f3digo que queremos!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Estendendo a configura\u00e7\u00e3o do webpack do WordPress Create Block Script\" \/>Gerando o editor e arquivos CSS de estilo.<\/p>\n<p>Os arquivos na <code>\/build<\/code>pasta n\u00e3o s\u00e3o necess\u00e1rios para nossa configura\u00e7\u00e3o, explorarei como podemos remov\u00ea-los a seguir.<\/p>\n<h3>Removendo arquivos indesejados<\/h3>\n<p>Para remover arquivos indesejados, vamos usar o <a href=\"https:\/\/www.npmjs.com\/package\/ignore-emit-webpack-plugin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>ignore-emit-webpack-plugin<\/code>pacote npm<\/a>.<\/p>\n<p>Este plugin impede que o webpack produza (ou &#8216;emita&#8217; certos arquivos).<\/p>\n<p>Instale o pacote npm com o comando terminal:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Modifique seu <code>\/webpack.config.js<\/code>arquivo para incluir a configura\u00e7\u00e3o do plug-in Ignore Emit webpack.<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Observe as novas refer\u00eancias na linha 2, que inclui o plug-in Ignore Emit, e na linha 41, que informa ao plug-in quais arquivos n\u00e3o devem ser emitidos.<\/p>\n<p>Agora quando executamos <code>npm start<\/code>(depois de deletar a <code>\/build<\/code>pasta) os <code>\/build\/editor.js<\/code>, <code>\/build\/editor.js.map<\/code>, <code>\/build\/style.js<\/code>e <code>\/build\/style.js.map<\/code>n\u00e3o s\u00e3o mais criados.<\/p>\n<h3>Sa\u00edda Somente Produ\u00e7\u00e3o<\/h3>\n<p>Se quisermos que apenas o produto produza e exclua os <code>.map<\/code>arquivos, podemos simplesmente passar <code>devtool: false<\/code>como par\u00e2metro em nosso <code>module.exports<\/code>objeto, e isso impedir\u00e1 que os <code>.map<\/code>arquivos sejam gerados.<\/p>\n<p>Como queremos apenas que esses arquivos sejam exclu\u00eddos em um servidor de produ\u00e7\u00e3o, podemos verificar a <code>process.env.NODE_ENV<\/code>configura\u00e7\u00e3o para ver como nosso ambiente atual est\u00e1 definido e passar <code>devtool: false<\/code>se o ambiente estiver definido para produ\u00e7\u00e3o.<\/p>\n<p>Para fazer isso, adicione o seguinte ao topo do nosso <code>\/webpack.config.js<\/code>arquivo:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Em seguida, adicione o seguinte na parte inferior do arquivo:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Se o <code>npm start<\/code>comando for executado e o ambiente do n\u00f3 n\u00e3o estiver configurado para produ\u00e7\u00e3o, os <code>.map<\/code>arquivos n\u00e3o ser\u00e3o criados.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Com o suporte oficial da equipe do WordPress Editor (Gutenberg), agora voc\u00ea pode come\u00e7ar a usar rapidamente um plug-in de bloco usando o WordPress Create Block Script (@wordpress\/cre&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,920,846,867],"tags":[1170],"class_list":["post-228720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=228720"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228720\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}