{"id":228276,"date":"2022-10-15T14:35:00","date_gmt":"2022-10-15T11:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228276"},"modified":"2022-11-09T01:38:32","modified_gmt":"2022-11-08T22:38:32","slug":"veebipaketi-lisakonfiguratsioon","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/veebipaketi-lisakonfiguratsioon\/","title":{"rendered":"Veebipaketi lisakonfiguratsioon"},"content":{"rendered":"\n

See artikkel p\u00f5hineb webpack.config.js<\/code>failil, mille l\u00f5ime artiklis WordPressi loomisplokkskripti veebipaketi konfiguratsiooni laiendamine<\/a>. Kui te pole seda artiklit lugenud, v\u00f5iksite seda kiiresti lugeda.<\/p>\n

See artikkel on m\u00f5eldud ploki skripti loomise vanemale versioonile<\/strong><\/p>\n

Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga \u00fchilduda. Meie uuendatud plokiskripti loomise juhendit<\/a> saate vaadata siit .<\/p>\n

Meil on ka uuendatud juhend veebipakki t\u00e4iendavate sisenemispunktide lisamise kohta<\/a>.<\/p>\n

CSS-i ristbrauseri toetamine pol\u00fct\u00e4ite ja eesliidetega<\/h2>\n

Enne kui sekkume, tahan avaldada tunnustust Jeffrey Carandangile<\/a> tema suurep\u00e4rase artikli eest PostCSS-i kasutamise kohta veebipaketiga<\/a>, mille jaoks sain artikli selle jaotise jaoks inspiratsiooni.<\/p>\n

Pol\u00fct\u00e4idete ja brauseri\u00fcleste eesliidete toetamiseks kasutame postcss-loader<\/code>pistikprogrammi laadimiseks paketti npm [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Veendumaks, et oleme cd<\/code>oma pistikprogrammi juurtes, k\u00e4ivitage nende kahe paketi installimiseks j\u00e4rgmine.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
J\u00e4rgmisena peame laiendama oma \/webpack.config.js<\/code>konfiguratsiooni nende kahe paketi jaoks:<\/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
Pange t\u00e4hele muudatusi ridadel 4 ja 18.<\/p>\n
Autoprefikseri testimine<\/h3>\n
Lisame oma \/src\/sass\/style.scss<\/code>failile koodi, et testida PostCSS-i pistikprogrammi automaatprefiksi funktsiooni. Lisan m\u00f5ned reeglid ::placeholder<\/code>faili, millel pole veel t\u00e4ielikku brauseri tuge.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
Meie koostatud \/style.css<\/code>failis v\u00e4ljastatakse n\u00fc\u00fcd j\u00e4rgmine:<\/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
Pol\u00fct\u00e4idete testimine<\/h3>\n
Lisame oma \/src\/sass\/style.scss<\/code>failile koodi, et testida PostCSS-i pistikprogrammi pol\u00fct\u00e4ite funktsiooni. Sisestan m\u00f5ned atribuudi reeglid all<\/code>(mis l\u00e4htestab elementide omadused) faili, millel pole veel t\u00e4ielikku brauseri tuge.<\/p>\n
Meie koostatud \/style.css<\/code>failis v\u00e4ljastatakse n\u00fc\u00fcd j\u00e4rgmine:<\/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
N\u00fc\u00fcd on see palju CSS-i!<\/p>\n
V\u00e4ljundi minimeerimine<\/h2>\n
Saame oma JavaScripti ja CSS-i varad kiiremini laadida, tagades nende minimeerimise. Selleks saame oma konstruktsiooni lisada paar lisapluginat.<\/p>\n
CSS-i v\u00e4hendamine veebipaketiga<\/h3>\n
CSS-i v\u00e4hendamiseks kasutame optimize-css-assets-webpack-plugin<\/code>paketti npm<\/a>.<\/p>\n
Veenduge, et olete cd<\/code>sisenenud oma pistikprogrammi juure ja k\u00e4ivitage terminalis j\u00e4rgmine k\u00e4sk:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
\/webpack.config.js<\/code>N\u00fc\u00fcd tehke oma failis j\u00e4rgmised muudatused .<\/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
Pange t\u00e4hele importi 4. real, k\u00e4ske meil veebipaketil minimeerida real 32 ja pistikprogrammi laadimist real 33.<\/p>\n
N\u00fc\u00fcd, kui k\u00e4ivitame npm start<\/code>, saame v\u00e4ljundi n\u00e4gemiseks uurida \u00fchte oma CSS-failidest pistikprogrammi juurtes. Siin \/style.css<\/code>n\u00e4eb praegune v\u00e4lja:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
See on eemaldanud k\u00f5ik kommentaarid, t\u00fchikud ja asetanud k\u00f5ik \u00fchele reale, mis on v\u00e4hendanud faili suurust.<\/p>\n
JavaScripti v\u00e4hendamine veebipaketiga<\/h3>\n
Kui vaatame \/build\/index.js<\/code>faili, on see \u00fcsna pikk. Seda faili saab ka minimeerida.<\/p>\n
Selleks kasutame terser-webpack-plugin<\/code>paketti npm<\/a>.<\/p>\n
Veenduge, et olete cd<\/code>sisenenud oma pistikprogrammi juure ja k\u00e4ivitage terminalis j\u00e4rgmine k\u00e4sk:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
\/webpack.config.js<\/code>N\u00fc\u00fcd tehke oma failis j\u00e4rgmised muudatused .<\/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
Pange t\u00e4hele importi real 7 ja minimeerija lisamist real 36.<\/p>\n
N\u00fc\u00fcd, kui me oma \/build\/index.js<\/code>faili kontrollime, on JavaScripti v\u00e4hendatud.<\/p>\n
JavaScripti minimeerimine<\/p>\n
Hankige eesliide ja minimeerimisp\u00f5him\u00f5tted<\/h3>\n
Pol\u00fct\u00e4ite- ja minimeerimisfaili \/webpack.config.js<\/code>ning kaasnevad\/package.json<\/code><\/a> failid saate alla laadida GitHubi sisust<\/a>.<\/p>\n
Valmis konfiguratsioon sisaldab ka m\u00f5ningaid boonuslisasid. Siin on kiire \u00fclevaade iga\u00fchest.<\/p>\n
Kiutage ja korrastage oma CSS automaatselt<\/h3>\n
Saate oma Sassi vormindada, automaatselt parandada ja korrastada, installides selleks j\u00e4rgmised paketid:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Salvestage oma konfiguratsiooni ka j\u00e4rgmine fail nimega .stylelintrc<\/code>. See p\u00e4rib poolt pakutavad vaikeseaded stylelint-config-standard<\/code>ja lisab m\u00f5ned lisad, sealhulgas t\u00e4hestikuline j\u00e4rjestus.<\/p>\n
Saate selle faili oma eelistuste j\u00e4rgi konfigureerida, kasutades Styleline’i dokumentatsiooni<\/a> juhiseid .<\/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
N\u00fc\u00fcd \/src\/editor.scss<\/code>muutke oma failis Sass pisut segaseks ja lisage paar testireeglit, n\u00e4iteks:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
N\u00fc\u00fcd, kui kasutate npm start<\/code>nuppu Salvesta, korrastatakse see automaatselt ja j\u00e4rjestatakse t\u00e4hestikuga j\u00e4rgmiselt:<\/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
Pange t\u00e4hele, et m\u00f5ned minu .stylelintrc<\/code>faili lisatud reeglid on rakendatud, n\u00e4iteks:<\/p>\n