{"id":228168,"date":"2022-10-15T14:35:00","date_gmt":"2022-10-15T11:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228168"},"modified":"2022-11-09T01:05:01","modified_gmt":"2022-11-08T22:05:01","slug":"dodatkowa-konfiguracja-dla-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodatkowa-konfiguracja-dla-webpack\/","title":{"rendered":"Dodatkowa konfiguracja dla webpack"},"content":{"rendered":"\n

Ten artyku\u0142 opiera si\u0119 na webpack.config.js<\/code>pliku, kt\u00f3ry utworzyli\u015bmy w artykule Extending the WordPress Create Block Script webpack Config<\/a>. Je\u015bli nie czyta\u0142e\u015b tego artyku\u0142u, mo\u017cesz go szybko przeczyta\u0107.<\/p>\n

Ten artyku\u0142 dotyczy starszej wersji skryptu tworzenia bloku<\/strong><\/p>\n

Chocia\u017c teori\u0119 mo\u017cna nadal zastosowa\u0107, niekt\u00f3re informacje zawarte w tym artykule mog\u0105 nie by\u0107 ju\u017c zgodne z najnowszym skryptem tworzenia bloku. Tutaj mo\u017cesz zapozna\u0107 si\u0119 z naszym zaktualizowanym przewodnikiem tworzenia skrypt\u00f3w blokowych<\/a>.<\/p>\n

Mamy r\u00f3wnie\u017c zaktualizowany przewodnik dotycz\u0105cy dodawania dodatkowych punkt\u00f3w wej\u015bcia do webpacka<\/a>.<\/p>\n

Obs\u0142uga przegl\u0105darki krzy\u017cowej CSS za pomoc\u0105 wype\u0142niaczy i przedrostk\u00f3w<\/h2>\n

Zanim wskoczymy, chcia\u0142bym podzi\u0119kowa\u0107 Jeffreyowi Carandangowi<\/a> za jego niesamowity artyku\u0142 na temat korzystania z PostCSS z pakietem webpack<\/a>, do kt\u00f3rego zainspirowa\u0142em si\u0119 w tej cz\u0119\u015bci artyku\u0142u.<\/p>\n

Aby obs\u0142ugiwa\u0107 wype\u0142niacze i prefiksy Cross-Browser, u\u017cyjemy postcss-loader<\/code>pakietu npm do za\u0142adowania wtyczki [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Upewniaj\u0105c si\u0119, \u017ce znajdujemy cd<\/code>si\u0119 w katalogu g\u0142\u00f3wnym naszej wtyczki, uruchom nast\u0119puj\u0105ce czynno\u015bci, aby zainstalowa\u0107 te dwa pakiety.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
Nast\u0119pnie musimy rozszerzy\u0107 nasz\u0105 \/webpack.config.js<\/code>konfiguracj\u0119 o konfiguracj\u0119 dla tych dw\u00f3ch pakiet\u00f3w:<\/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
Zwr\u00f3\u0107 uwag\u0119 na modyfikacje w wierszach 4 i 18.<\/p>\n
Testowanie autoprefiksu<\/h3>\n
Dodajmy troch\u0119 kodu do naszego \/src\/sass\/style.scss<\/code>pliku, aby przetestowa\u0107 funkcj\u0119 autoprefixera wtyczki PostCSS. Wstawi\u0119 kilka regu\u0142 ::placeholder<\/code>do pliku, kt\u00f3ry nie ma jeszcze pe\u0142nej obs\u0142ugi przegl\u0105darki.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
W naszym skompilowanym \/style.css<\/code>pliku jest teraz wyprowadzane:<\/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
Testowanie wype\u0142niaczy<\/h3>\n
Dodajmy troch\u0119 kodu do naszego \/src\/sass\/style.scss<\/code>pliku, aby przetestowa\u0107 funkcj\u0119 polyfill wtyczki PostCSS. Wstawi\u0119 kilka regu\u0142 dla all<\/code>w\u0142a\u015bciwo\u015bci (kt\u00f3ra resetuje w\u0142a\u015bciwo\u015bci element\u00f3w) do pliku, kt\u00f3ry nie ma jeszcze pe\u0142nej obs\u0142ugi przegl\u0105darki.<\/p>\n
W naszym skompilowanym \/style.css<\/code>pliku jest teraz wyprowadzane:<\/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
To du\u017co CSS!<\/p>\n
Minimalizowanie wynik\u00f3w<\/h2>\n
Mo\u017cemy szybciej \u0142adowa\u0107 nasze zasoby JavaScript i CSS, upewniaj\u0105c si\u0119, \u017ce s\u0105 one zminimalizowane. Aby to zrobi\u0107, mo\u017cemy doda\u0107 do naszej kompilacji kilka dodatkowych wtyczek.<\/p>\n
Minifikacja CSS za pomoc\u0105 webpack<\/h3>\n
Aby zminimalizowa\u0107 CSS u\u017cyjemy optimize-css-assets-webpack-plugin<\/code>pakietu npm<\/a>.<\/p>\n
Upewnij si\u0119, \u017ce jeste\u015b cd<\/code>w katalogu g\u0142\u00f3wnym wtyczki i uruchom nast\u0119puj\u0105ce polecenie w swoim terminalu:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Teraz dokonaj nast\u0119puj\u0105cych zmian w swoim \/webpack.config.js<\/code>pliku:<\/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
Zwr\u00f3\u0107 uwag\u0119 na import w wierszu 4, kt\u00f3ry m\u00f3wi webpackowi, aby zminimalizowa\u0142 w wierszu 32, a wtyczka jest \u0142adowana w wierszu 33.<\/p>\n
Teraz po uruchomieniu npm start<\/code>mo\u017cemy sprawdzi\u0107 jeden z naszych plik\u00f3w CSS w katalogu g\u0142\u00f3wnym wtyczki, aby zobaczy\u0107 wynik. Oto jak \/style.css<\/code>teraz wygl\u0105da:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Usun\u0105\u0142 wszystkie komentarze, spacje i umie\u015bci\u0142 wszystko w jednym wierszu, co zmniejszy\u0142o rozmiar pliku.<\/p>\n
Minifikacja JavaScript za pomoc\u0105 webpack<\/h3>\n
Je\u015bli przyjrzymy si\u0119 \/build\/index.js<\/code>plikowi, jest on do\u015b\u0107 d\u0142ugi. Ten plik przyda\u0142by si\u0119 r\u00f3wnie\u017c z pewn\u0105 minifikacj\u0105.<\/p>\n
W tym celu u\u017cyjemy terser-webpack-plugin<\/code>pakietu npm<\/a>.<\/p>\n
Upewnij si\u0119, \u017ce jeste\u015b cd<\/code>w katalogu g\u0142\u00f3wnym wtyczki i uruchom nast\u0119puj\u0105ce polecenie w swoim terminalu:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Teraz dokonaj nast\u0119puj\u0105cych zmian w swoim \/webpack.config.js<\/code>pliku:<\/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
Zwr\u00f3\u0107 uwag\u0119 na import w linii 7 i dodanie do minimalizatora w linii 36.<\/p>\n
Teraz, je\u015bli sprawdzimy nasz \/build\/index.js<\/code>plik, JavaScript zosta\u0142 zminimalizowany.<\/p>\n
Minimalizowanie JavaScript<\/p>\n
Pobierz opis prefiksu i minifikacji<\/h3>\n
Mo\u017cesz pobra\u0107 plik wype\u0142niania i minifikacji \/webpack.config.js<\/code>oraz towarzysz\u0105ce mu \/package.json<\/code>pliki z GitHub Gist<\/a>.<\/p>\n
Gotowa konfiguracja zawiera r\u00f3wnie\u017c kilka bonusowych dodatk\u00f3w. Oto kr\u00f3tki przegl\u0105d ka\u017cdego z nich.<\/p>\n
Automatycznie Lint i Uporz\u0105dkuj sw\u00f3j CSS<\/h3>\n
Mo\u017cesz sformatowa\u0107, automatycznie naprawi\u0107 i uporz\u0105dkowa\u0107 swojego Sassa, aby to zrobi\u0107, zainstaluj nast\u0119puj\u0105ce pakiety:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Zapisz r\u00f3wnie\u017c nast\u0119puj\u0105cy plik w swojej konfiguracji pod nazw\u0105 .stylelintrc<\/code>. Dziedziczy to warto\u015bci domy\u015blne dostarczone przez stylelint-config-standard<\/code>, i dodaje kilka dodatkowych dodatk\u00f3w, w tym kolejno\u015b\u0107 alfabetyczn\u0105.<\/p>\n
Mo\u017cesz skonfigurowa\u0107 ten plik zgodnie z w\u0142asnymi preferencjami, korzystaj\u0105c ze wskaz\u00f3wek zawartych w dokumentacji 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
Teraz w swoim \/src\/editor.scss<\/code>pliku zr\u00f3b sw\u00f3j Sass troch\u0119 ba\u0142aganu i dodaj kilka regu\u0142 testowych, takich jak:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Teraz, gdy uruchomisz npm start<\/code>zapis trafie\u0144, zostanie on automatycznie uporz\u0105dkowany i uporz\u0105dkowany alfabetycznie, tak jak poni\u017cej:<\/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
Zwr\u00f3\u0107 uwag\u0119, \u017ce niekt\u00f3re z regu\u0142, kt\u00f3re doda\u0142em do mojego .stylelintrc<\/code>pliku, zosta\u0142y zaimplementowane, takie jak:<\/p>\n