{"id":228612,"date":"2022-10-15T14:20:00","date_gmt":"2022-10-15T11:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228612"},"modified":"2022-11-09T03:16:07","modified_gmt":"2022-11-09T00:16:07","slug":"configuracao-adicional-para-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/configuracao-adicional-para-webpack\/","title":{"rendered":"Configura\u00e7\u00e3o adicional para webpack"},"content":{"rendered":"\n

Este artigo se baseia no webpack.config.js<\/code>arquivo que criamos no artigo Extending the WordPress Create Block Script webpack Config<\/a>. Se voc\u00ea n\u00e3o leu esse artigo, voc\u00ea pode querer dar-lhe uma leitura r\u00e1pida.<\/p>\n

Este artigo \u00e9 para uma vers\u00e3o mais antiga do Create Block Script<\/strong><\/p>\n

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 ver nosso guia de script de cria\u00e7\u00e3o de bloco atualizado aqui<\/a>.<\/p>\n

Tamb\u00e9m temos um guia atualizado sobre como adicionar pontos de entrada adicionais ao webpack<\/a>.<\/p>\n

Suportando CSS Cross Browser com Polyfills e Prefixos<\/h2>\n

Antes de entrarmos, quero dar cr\u00e9dito a Jeffrey Carandang<\/a> em seu incr\u00edvel artigo sobre o uso de PostCSS com webpack<\/a>, para o qual me inspirei nesta se\u00e7\u00e3o do artigo.<\/p>\n

Para suportar polyfills e prefixos entre navegadores, usaremos o postcss-loader<\/code>pacote npm para carregar o plugin [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Garantindo que estamos cd<\/code>na raiz do nosso plugin, execute o seguinte para instalar esses dois pacotes.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
Em seguida, precisamos estender nosso \/webpack.config.js<\/code>para incluir a configura\u00e7\u00e3o desses dois pacotes:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\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                default: false,\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n    ],\n};\n\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Observe as modifica\u00e7\u00f5es nas linhas 4 e 18.<\/p>\n
Testando o prefixo autom\u00e1tico<\/h3>\n
Vamos adicionar algum c\u00f3digo ao nosso \/src\/sass\/style.scss<\/code>arquivo para testar a fun\u00e7\u00e3o autoprefixer do plugin PostCSS. Vou inserir algumas regras para ::placeholder<\/code>no arquivo, que ainda n\u00e3o tem suporte total ao navegador.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
Em nosso arquivo compilado \/style.css<\/code>, o seguinte \u00e9 agora gerado:<\/p>\n
::-webkit-input-placeholder {\n  color: #f00; }\n\n::-moz-placeholder {\n  color: #f00; }\n\n:-ms-input-placeholder {\n  color: #f00; }\n\n::-ms-input-placeholder {\n  color: #f00; }\n\n::placeholder {\n  color: #f00; }\n<\/code><\/pre>\n
Testando os Polyfills<\/h3>\n
Vamos adicionar algum c\u00f3digo ao nosso \/src\/sass\/style.scss<\/code>arquivo para testar a fun\u00e7\u00e3o polyfill do plugin PostCSS. Vou inserir algumas regras para a all<\/code>propriedade (que redefine as propriedades de um elemento) no arquivo, que ainda n\u00e3o tem suporte total ao navegador.<\/p>\n
Em nosso arquivo compilado \/style.css<\/code>, o seguinte \u00e9 agora gerado:<\/p>\n
a {\n  -webkit-animation: none 0s ease 0s 1 normal none running;\n          animation: none 0s ease 0s 1 normal none running;\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  background: transparent none repeat 0 0 \/ auto auto padding-box border-box scroll;\n  border: medium none currentColor;\n  border-collapse: separate;\n  -o-border-image: none;\n     border-image: none;\n  border-radius: 0;\n  border-spacing: 0;\n  bottom: auto;\n  box-shadow: none;\n  box-sizing: content-box;\n  caption-side: top;\n  clear: none;\n  clip: auto;\n  color: #000;\n  -webkit-columns: auto;\n     -moz-columns: auto;\n          columns: auto;\n  -webkit-column-count: auto;\n     -moz-column-count: auto;\n          column-count: auto;\n  -webkit-column-fill: balance;\n     -moz-column-fill: balance;\n          column-fill: balance;\n  grid-column-gap: normal;\n  -webkit-column-gap: normal;\n     -moz-column-gap: normal;\n          column-gap: normal;\n  -webkit-column-rule: medium none currentColor;\n     -moz-column-rule: medium none currentColor;\n          column-rule: medium none currentColor;\n  -webkit-column-span: 1;\n     -moz-column-span: 1;\n          column-span: 1;\n  -webkit-column-width: auto;\n     -moz-column-width: auto;\n          column-width: auto;\n  content: normal;\n  counter-increment: none;\n  counter-reset: none;\n  cursor: auto;\n  direction: ltr;\n  display: inline;\n  empty-cells: show;\n  float: none;\n  font-family: serif;\n  font-size: medium;\n  font-style: normal;\n  font-feature-settings: normal;\n  font-variant: normal;\n  font-weight: normal;\n  font-stretch: normal;\n  line-height: normal;\n  height: auto;\n  -webkit-hyphens: none;\n      -ms-hyphens: none;\n          hyphens: none;\n  left: auto;\n  letter-spacing: normal;\n  list-style: disc outside none;\n  margin: 0;\n  max-height: none;\n  max-width: none;\n  min-height: 0;\n  min-width: 0;\n  opacity: 1;\n  orphans: 2;\n  outline: medium none invert;\n  overflow: visible;\n  overflow-x: visible;\n  overflow-y: visible;\n  padding: 0;\n  page-break-after: auto;\n  page-break-before: auto;\n  page-break-inside: auto;\n  perspective: none;\n  perspective-origin: 50% 50%;\n  position: static;\n  right: auto;\n  -moz-tab-size: 8;\n    -o-tab-size: 8;\n       tab-size: 8;\n  table-layout: auto;\n  text-align: left;\n  -moz-text-align-last: auto;\n       text-align-last: auto;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  top: auto;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  transform-style: flat;\n  transition: none 0s ease 0s;\n  unicode-bidi: normal;\n  vertical-align: baseline;\n  visibility: visible;\n  white-space: normal;\n  widows: 2;\n  width: auto;\n  word-spacing: normal;\n  z-index: auto;\n  all: initial; }\n<\/code><\/pre>\n
Agora que \u00e9 um monte de CSS!<\/p>\n
Minimizando a sa\u00edda<\/h2>\n
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.<\/p>\n
Minificando CSS com webpack<\/h3>\n
Para minimizar o CSS vamos usar o optimize-css-assets-webpack-plugin<\/code>pacote npm<\/a>.<\/p>\n
Certifique-se cd<\/code>de estar na raiz do seu plugin e execute o seguinte comando no seu terminal:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Agora fa\u00e7a as seguintes altera\u00e7\u00f5es no seu \/webpack.config.js<\/code>arquivo:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ],\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',                   \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\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Observe a importa\u00e7\u00e3o na linha 4, n\u00f3s informando ao webpack para minimizar na linha 32 e o plugin sendo carregado na linha 33.<\/p>\n
Agora, quando executamos npm start<\/code>, podemos examinar um de nossos arquivos CSS na raiz do plugin para ver a sa\u00edda. Veja como est\u00e1 \/style.css<\/code>agora:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Ele removeu todos os coment\u00e1rios, espa\u00e7os e colocou tudo em uma linha, o que reduziu o tamanho do arquivo.<\/p>\n
Minimizando JavaScript com webpack<\/h3>\n
Se dermos uma olhada no \/build\/index.js<\/code>arquivo, ele \u00e9 bastante longo. Este arquivo tamb\u00e9m pode fazer com alguma minifica\u00e7\u00e3o.<\/p>\n
Para fazer isso, vamos usar o terser-webpack-plugin<\/code>pacote npm<\/a>.<\/p>\n
Certifique-se cd<\/code>de estar na raiz do seu plugin e execute o seguinte comando no seu terminal:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Agora fa\u00e7a as seguintes altera\u00e7\u00f5es no seu \/webpack.config.js<\/code>arquivo:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\nconst TerserWebPackPlugin = require( 'terser-webpack-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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins: () => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ \n            new OptimizeCssAssetsWebpackPlugin(),\n            new TerserWebPackPlugin(),\n        ],\n        splitChunks: {\n            cacheGroups: {\n                default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\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\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Observe a importa\u00e7\u00e3o na linha 7 e a adi\u00e7\u00e3o ao minimizador na linha 36.<\/p>\n
Agora, se inspecionarmos nosso \/build\/index.js<\/code>arquivo, o JavaScript foi reduzido.<\/p>\n
Minimizando o JavaScript<\/p>\n
Obtenha o Prefixo e Minifica\u00e7\u00e3o Gist<\/h3>\n
Voc\u00ea pode baixar o arquivo polyfill e minification \/webpack.config.js<\/code>e os arquivos que o acompanham \/package.json<\/code>do GitHub gist<\/a>.<\/p>\n
A configura\u00e7\u00e3o final tamb\u00e9m cont\u00e9m alguns extras de b\u00f4nus. Aqui est\u00e1 uma r\u00e1pida vis\u00e3o geral de cada um.<\/p>\n
Fa\u00e7a um Lint e Arrume seu CSS Automaticamente<\/h3>\n
Voc\u00ea pode formatar, corrigir automaticamente e arrumar seu Sass \u00e0 medida que avan\u00e7a, para isso instale os seguintes pacotes:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Salve tamb\u00e9m o seguinte arquivo em sua configura\u00e7\u00e3o com o nome .stylelintrc<\/code>. Isso herda os padr\u00f5es fornecidos por stylelint-config-standard<\/code>e adiciona alguns extras de b\u00f4nus, incluindo ordena\u00e7\u00e3o alfab\u00e9tica.<\/p>\n
Voc\u00ea pode configurar este arquivo de acordo com suas prefer\u00eancias usando a orienta\u00e7\u00e3o na documenta\u00e7\u00e3o do Styleline<\/a>.<\/p>\n
{\n    \"extends\": \"stylelint-config-standard\",\n    \"plugins\": [\n        \"stylelint-order\"\n    ],\n    \"rules\": {\n        \"color-hex-length\": \"long\",\n        \"font-family-name-quotes\": null,\n        \"function-url-quotes\": \"always\",\n        \"indentation\": \"tab\",\n        \"max-empty-lines\": 2,\n        \"number-leading-zero\": \"never\",\n        \"order\/order\": [\n            \"custom-properties\",\n            \"declarations\"\n        ],\n        \"order\/properties-alphabetical-order\": true,\n        \"string-quotes\": \"single\",\n    }\n}\n<\/code><\/pre>\n
Agora, em seu \/src\/editor.scss<\/code>arquivo, deixe seu Sass um pouco confuso e adicione algumas regras de teste, assim:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Agora, quando voc\u00ea estiver executando npm start<\/code>, clique em salvar, ele ser\u00e1 automaticamente arrumado e em ordem alfab\u00e9tica da seguinte forma:<\/p>\n
.wp-block-wcltd-wholesome-notes {\n    background: url('https:\/\/via.placeholder.com\/150');\n    border: 1px dotted #ff0000;\n}\n<\/code><\/pre>\n
Observe que algumas das regras que adicionei no meu .stylelintrc<\/code>arquivo foram implementadas, como:<\/p>\n