{"id":228273,"date":"2022-10-15T14:40:00","date_gmt":"2022-10-15T11:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228273"},"modified":"2022-11-09T01:37:28","modified_gmt":"2022-11-08T22:37:28","slug":"configuracion-adicional-para-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/configuracion-adicional-para-webpack\/","title":{"rendered":"Configuraci\u00f3n adicional para webpack"},"content":{"rendered":"\n

Este art\u00edculo se basa en el webpack.config.js<\/code>archivo que creamos en el art\u00edculo Ampliaci\u00f3n de la configuraci\u00f3n del paquete web de WordPress Create Block Script<\/a>. Si no ha le\u00eddo ese art\u00edculo, es posible que desee leerlo r\u00e1pidamente.<\/p>\n

Este art\u00edculo es para una versi\u00f3n anterior de Create Block Script<\/strong><\/p>\n

Aunque la teor\u00eda a\u00fan se puede aplicar, es posible que parte de la informaci\u00f3n de este art\u00edculo ya no sea compatible con el \u00faltimo script de creaci\u00f3n de bloques. Puede ver nuestra gu\u00eda actualizada de creaci\u00f3n de secuencias de comandos de bloques aqu\u00ed<\/a>.<\/p>\n

Tambi\u00e9n tenemos una gu\u00eda actualizada sobre c\u00f3mo agregar puntos de entrada adicionales al paquete web<\/a>.<\/p>\n

Compatibilidad con CSS Cross Browser con Polyfills y Prefixes<\/h2>\n

Antes de comenzar, quiero dar cr\u00e9dito a Jeffrey Carandang<\/a> por su incre\u00edble art\u00edculo sobre el uso de PostCSS con webpack<\/a>, en el que me inspir\u00e9 para esta secci\u00f3n del art\u00edculo.<\/p>\n

Para admitir polyfills y prefijos de navegadores cruzados, usaremos el postcss-loader<\/code>paquete npm para cargar el complemento [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Asegur\u00e1ndose de que estamos cd<\/code>en la ra\u00edz de nuestro complemento, ejecute lo siguiente para instalar estos dos paquetes.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
A continuaci\u00f3n, debemos ampliar nuestro \/webpack.config.js<\/code>para incluir la configuraci\u00f3n de estos dos paquetes:<\/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
Tenga en cuenta las modificaciones en las l\u00edneas 4 y 18.<\/p>\n
Probando el Autoprefixer<\/h3>\n
Agreguemos algo de c\u00f3digo a nuestro \/src\/sass\/style.scss<\/code>archivo para probar la funci\u00f3n de autoprefixer del complemento PostCSS. Insertar\u00e9 algunas reglas ::placeholder<\/code>en el archivo, que a\u00fan no tiene compatibilidad completa con el navegador.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
En nuestro archivo compilado \/style.css<\/code>ahora se muestra lo siguiente:<\/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
Probando los Polyfills<\/h3>\n
Agreguemos algo de c\u00f3digo a nuestro \/src\/sass\/style.scss<\/code>archivo para probar la funci\u00f3n polyfill del complemento PostCSS. Insertar\u00e9 algunas reglas para la all<\/code>propiedad (que restablece las propiedades de los elementos) en el archivo, que a\u00fan no tiene soporte completo para el navegador.<\/p>\n
En nuestro archivo compilado \/style.css<\/code>ahora se muestra lo siguiente:<\/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
\u00a1Eso es mucho CSS!<\/p>\n
Minimizar la salida<\/h2>\n
Podemos cargar nuestros activos de JavaScript y CSS m\u00e1s r\u00e1pido asegur\u00e1ndonos de que est\u00e9n minimizados. Para hacer esto, podemos agregar un par de complementos adicionales en nuestra compilaci\u00f3n.<\/p>\n
Minimizar CSS con webpack<\/h3>\n
Para minimizar CSS vamos a usar el optimize-css-assets-webpack-plugin<\/code>paquete npm<\/a>.<\/p>\n
Aseg\u00farese cd<\/code>de ingresar a la ra\u00edz de su complemento y ejecute el siguiente comando en su terminal:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Ahora haga las siguientes modificaciones en su \/webpack.config.js<\/code>archivo:<\/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
Tenga en cuenta la importaci\u00f3n en la l\u00ednea 4, le indicamos a webpack que minimice en la l\u00ednea 32 y el complemento se carga en la l\u00ednea 33.<\/p>\n
Ahora, cuando ejecutamos npm start<\/code>, podemos examinar uno de nuestros archivos CSS en la ra\u00edz del complemento para ver el resultado. As\u00ed es \/style.css<\/code>como se ve el ahora:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Ha eliminado todos los comentarios, espacios y ha puesto todo en una sola l\u00ednea, lo que ha reducido el tama\u00f1o del archivo.<\/p>\n
Minimizar JavaScript con webpack<\/h3>\n
Si echamos un vistazo al \/build\/index.js<\/code>archivo, es bastante extenso. A este archivo tambi\u00e9n le vendr\u00eda bien algo de minificaci\u00f3n.<\/p>\n
Para ello vamos a utilizar el terser-webpack-plugin<\/code>paquete npm<\/a>.<\/p>\n
Aseg\u00farese cd<\/code>de ingresar a la ra\u00edz de su complemento y ejecute el siguiente comando en su terminal:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Ahora haga las siguientes modificaciones en su \/webpack.config.js<\/code>archivo:<\/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
Tenga en cuenta la importaci\u00f3n en la l\u00ednea 7 y la adici\u00f3n al minimizador en la l\u00ednea 36.<\/p>\n
Ahora, si inspeccionamos nuestro \/build\/index.js<\/code>archivo, el JavaScript se ha minimizado.<\/p>\n
Minimizando el JavaScript<\/p>\n
Obtenga el prefijo y la esencia de la minificaci\u00f3n<\/h3>\n
Puede descargar el archivo de minificaci\u00f3n y polyfill y \/webpack.config.js<\/code>los archivos que lo acompa\u00f1an \/package.json<\/code>desde GitHub gist<\/a>.<\/p>\n
La configuraci\u00f3n final tambi\u00e9n contiene algunos extras adicionales. Aqu\u00ed hay una descripci\u00f3n general r\u00e1pida de cada uno.<\/p>\n
Limpia y ordena autom\u00e1ticamente tu CSS<\/h3>\n
Puede formatear, corregir autom\u00e1ticamente y ordenar su Sass a medida que avanza, para hacer esto, instale los siguientes paquetes:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Tambi\u00e9n guarde el siguiente archivo en su configuraci\u00f3n con el nombre .stylelintrc<\/code>. Esto hereda los valores predeterminados proporcionados por stylelint-config-standard<\/code>y agrega algunos extras adicionales, incluido el orden alfab\u00e9tico.<\/p>\n
Puede configurar este archivo seg\u00fan sus preferencias siguiendo las instrucciones de la documentaci\u00f3n de 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
Ahora, en su \/src\/editor.scss<\/code>archivo, haga que su Sass sea un poco desordenado y agregue un par de reglas de prueba, as\u00ed:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Ahora, cuando est\u00e9 ejecutando npm start<\/code>, presione guardar, se ordenar\u00e1 autom\u00e1ticamente y se ordenar\u00e1 alfab\u00e9ticamente de la siguiente manera:<\/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
.stylelintrc<\/code>Tenga en cuenta que se han implementado algunas de las reglas que agregu\u00e9 en mi archivo, como:<\/p>\n