{"id":228183,"date":"2022-10-15T18:06:00","date_gmt":"2022-10-15T15:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228183"},"modified":"2022-11-09T01:09:50","modified_gmt":"2022-11-08T22:09:50","slug":"rozszerzanie-konfiguracji-webpacka-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/rozszerzanie-konfiguracji-webpacka-wordpress-create-block-script\/","title":{"rendered":"Rozszerzanie konfiguracji webpacka WordPress Create Block Script"},"content":{"rendered":"\n<p>Dzi\u0119ki oficjalnemu wsparciu zespo\u0142u edytora WordPress (Gutenberg) mo\u017cesz teraz szybko rozpocz\u0105\u0107 prac\u0119 z wtyczk\u0105 blokow\u0105 za pomoc\u0105 <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skryptu tworzenia bloku WordPress<\/a> (<code>@wordpress\/create-block<\/code>pakiet npm).<\/p>\n<p><strong>Ten artyku\u0142 dotyczy starszej wersji skryptu tworzenia bloku<\/strong><\/p>\n<p>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 <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zapozna\u0107 si\u0119 z naszym zaktualizowanym przewodnikiem tworzenia skrypt\u00f3w blokowych<\/a>.<\/p>\n<p>Mamy r\u00f3wnie\u017c zaktualizowany przewodnik dotycz\u0105cy <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodawania dodatkowych punkt\u00f3w wej\u015bcia do webpacka<\/a>.<\/p>\n<p>W tym artykule dowiemy si\u0119, jak doda\u0107 niestandardowe <code>webpack.config<\/code>, aby rozszerzy\u0107 <code>wp-scripts<\/code>funkcjonalno\u015b\u0107 kompilacji bloku generowanego przez blok.<\/p>\n<p>Dzi\u0119ki temu mo\u017cemy rozwin\u0105\u0107 <code>npm start<\/code>polecenie, aby uruchomi\u0107 dodatkowe zadania. W tym przypadku skonfigurujemy wtyczk\u0119 do kompilacji Sass (<code>sass<\/code>, <code>scss<\/code>) do <code>css<\/code>.<\/p>\n<p>Skompilujemy Sassa z <code>\/src<\/code>folderu do plik\u00f3w <code>style.css<\/code>i <code>editor.css<\/code>w katalogu g\u0142\u00f3wnym wtyczki.<\/p>\n<h2>Tw\u00f3rz nasze pliki Sass<\/h2>\n<p>Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 zrobimy, jest utworzenie nowego folderu pod adresem <code>\/src\/scss<\/code>. Tutaj dodamy dwa pliki:<\/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>Skopiujemy pliki <code>css<\/code>z <code>\/editor.css<\/code>i <code>\/style.css<\/code>do nowo utworzonych plik\u00f3w.<\/p>\n<p>Nast\u0119pnie usuniemy pliki <code>\/editor.css<\/code>i <code>\/style.css<\/code>.<\/p>\n<p>Pliki SCSS i nowa struktura folder\u00f3w.<\/p>\n<h3>Zaimportuj Sassa do<code>\/src\/index.js<\/code><\/h3>\n<p>U g\u00f3ry swojego <code>\/src\/index.js<\/code>dodaj nast\u0119puj\u0105ce stwierdzenia:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Umo\u017cliwi to webpackowi pobranie <code>.scss<\/code>plik\u00f3w w celu ich przetworzenia.<\/p>\n<p>Importuj\u0105c Sassa na g\u00f3rze naszego pliku w ten spos\u00f3b, umo\u017cliwi nam to <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skompilowanie Sassa dla wielu blok\u00f3w w tej samej wtyczce w jednym pliku<\/a>. W tym przypadku skompiluje Sassa do pojedynczych plik\u00f3w <code>\/editor.css<\/code>i <code>\/style.css<\/code>plik\u00f3w dla ca\u0142ej wtyczki.<\/p>\n<h2>Skonfiguruj<code>webpack.config<\/code><\/h2>\n<p>Utw\u00f3rz nowy plik w katalogu g\u0142\u00f3wnym wtyczki o nazwie <code>\/webpack.config.js<\/code>. Skopiuj nast\u0119puj\u0105cy kod do tego pliku:<\/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>Teraz w swoim terminalu wpisz nast\u0119puj\u0105ce polecenie <code>cd<\/code>&#8217;ed do katalogu g\u0142\u00f3wnego wtyczki:<\/p>\n<p>Wtyczka powinna normalnie skompilowa\u0107 JavaScript do folderu kompilacji.<\/p>\n<h3>Instalowanie pakietu do kompilacji Sass<\/h3>\n<p>Zamierzamy u\u017cy\u0107 <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>pakietu npm<\/a> do tworzenia <code>.css<\/code>plik\u00f3w z naszego Sassa, w tym celu potrzebujemy r\u00f3wnie\u017c kilku dodatkowych pakiet\u00f3w, aby <code>.scss<\/code>najpierw przetworzy\u0107 pliki na CSS.<\/p>\n<p>Zainstalujemy <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>pakiet npm<\/a>, aby umo\u017cliwi\u0107 nam kompilacj\u0119 CSS do Sass. ma to zale\u017cno\u015b\u0107 <code>node-scss<\/code>.<\/p>\n<p>Zainstalujemy r\u00f3wnie\u017c <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>pakiet npm,<\/a> aby umo\u017cliwi\u0107 nam obs\u0142ug\u0119 <code>@import<\/code>instrukcji w CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>Teraz rozszerz <code>\/webpack.config.js<\/code>plik, aby wygl\u0105da\u0142 nast\u0119puj\u0105co:<\/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>W linii 2 zaimportowali\u015bmy <code>mini-css-extract-plugin<\/code>, w linii 20 zadeklarowali\u015bmy j\u0105 jako wtyczk\u0119 i przekazali\u015bmy <code>..\/[name].css<\/code>jako <code>filename<\/code>. Oznacza to, \u017ce skompilowany plik zostanie dodany do katalogu g\u0142\u00f3wnego wtyczki.<\/p>\n<p>W linii 10 przekazali\u015bmy obiekt, kt\u00f3ry ma <code>test<\/code>parametr, kt\u00f3ry u\u017cywa wyra\u017cenia regularnego do wskazania rodzaju sprawdzanego pliku oraz <code>use<\/code>parametru.<\/p>\n<p>Parametr <code>use<\/code>zawiera tablic\u0119 wszystkich wtyczek, kt\u00f3re zamierzamy zastosowa\u0107 do tego testu. Uruchamia wtyczki od do\u0142u listy, ko\u0144cz\u0105c na g\u00f3rze.<\/p>\n<p>Teraz, je\u015bli uruchomimy <code>npm start<\/code>, utworzy <code>.css<\/code>plik w katalogu g\u0142\u00f3wnym wtyczki.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Rozszerzanie konfiguracji webpacka WordPress Create Block Script\" \/>Generowanie pliku CSS.<\/p>\n<p>Patrz\u0105c na struktur\u0119 plik\u00f3w mamy dwa dodatkowe pliki:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Otrzymujemy r\u00f3wnie\u017c kilka plik\u00f3w JavaScript w <code>\/build<\/code>folderze, ale wyja\u015bni\u0119, jak sobie z nimi radzi\u0107 p\u00f3\u017aniej).<\/p>\n<p>Plik <code>.map<\/code>jest wska\u017anikiem, kt\u00f3ry wskazuje konsoli JavaScript, w kt\u00f3rym pliku zosta\u0142 pierwotnie zdefiniowany jaki\u015b CSS lub Sass, i pomaga w debugowaniu.<\/p>\n<p>Analizuj\u0105c <code>\/index.css<\/code>plik, zawiera kod z obu plik\u00f3w <code>\/src\/scss\/editor.scss<\/code>i .<code>\/src\/scss\/style.scss<\/code><\/p>\n<p>To nie jest to, czego chcemy, poniewa\u017c pliki styl\u00f3w i edytor\u00f3w s\u0105 kolejkowane osobno w naszym pliku php wtyczek.<\/p>\n<h3>Dzielenie pliku CSS<\/h3>\n<p>Aby podzieli\u0107 ten <code>\/index.css<\/code>plik, musimy skorzysta\u0107 z <code>optimization.splitChunks<\/code>obiektu webpacka 4. Aby uzyska\u0107 wi\u0119cej informacji na temat jego konfiguracji, przeczytaj <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">stron\u0119 dokumentacji splitChunks<\/a>.<\/p>\n<p>Dodaj nast\u0119puj\u0105ce elementy do swojego <code>\/webpack.config.js<\/code>pliku:<\/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>Usu\u0144 wcze\u015bniej wygenerowane pliki i folder kompilacji i uruchom <code>npm start<\/code>.<\/p>\n<p>Otrzymujemy teraz nast\u0119puj\u0105ce pliki:<\/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>Patrz\u0105c <code>\/editor.css<\/code>i <code>\/style.css<\/code>te zosta\u0142y wygenerowane poprawnie i zawieraj\u0105 kod, kt\u00f3ry chcemy!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Rozszerzanie konfiguracji webpacka WordPress Create Block Script\" \/>Generowanie edytora i styl\u00f3w plik\u00f3w CSS.<\/p>\n<p>Pliki w <code>\/build<\/code>folderze nie s\u0105 potrzebne do naszej konfiguracji, zbadam, jak mo\u017cemy je p\u00f3\u017aniej usun\u0105\u0107.<\/p>\n<h3>Usuwanie niechcianych plik\u00f3w<\/h3>\n<p>Do usuni\u0119cia niechcianych plik\u00f3w u\u017cyjemy <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>pakietu npm<\/a>.<\/p>\n<p>Ta wtyczka uniemo\u017cliwia webpackowi wysy\u0142anie (lub &quot;emitowanie&quot; niekt\u00f3rych plik\u00f3w).<\/p>\n<p>Zainstaluj pakiet npm za pomoc\u0105 polecenia terminala:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Zmodyfikuj <code>\/webpack.config.js<\/code>plik, aby zawiera\u0142 konfiguracj\u0119 wtyczki Ignore Emit webpack Plugin.<\/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>Zwr\u00f3\u0107 uwag\u0119 na nowe odniesienia w wierszu 2, kt\u00f3ry zawiera wtyczk\u0119 Ignore Emit, oraz w wierszu 41, kt\u00f3ry m\u00f3wi wtyczce, kt\u00f3re pliki nie maj\u0105 by\u0107 emitowane.<\/p>\n<p>Teraz kiedy uruchamiamy <code>npm start<\/code>(po usuni\u0119ciu <code>\/build<\/code>folderu) <code>\/build\/editor.js<\/code>, <code>\/build\/editor.js.map<\/code>i <code>\/build\/style.js<\/code>nie <code>\/build\/style.js.map<\/code>s\u0105 ju\u017c tworzone.<\/p>\n<h3>Produkcja tylko produkcja<\/h3>\n<p>Je\u015bli chcemy mie\u0107 tylko wynik produktu i wykluczy\u0107 <code>.map<\/code>pliki, mo\u017cemy po prostu przekaza\u0107 <code>devtool: false<\/code>jako parametr do naszego <code>module.exports<\/code>obiektu, a to uniemo\u017cliwi <code>.map<\/code>generowanie plik\u00f3w.<\/p>\n<p>Poniewa\u017c chcemy, aby te pliki by\u0142y wykluczone tylko na serwerze produkcyjnym, mo\u017cemy sprawdzi\u0107 <code>process.env.NODE_ENV<\/code>ustawienie, aby zobaczy\u0107, jakie jest ustawione nasze obecne \u015brodowisko, i przekaza\u0107 je, <code>devtool: false<\/code>je\u015bli jest ustawione na produkcj\u0119.<\/p>\n<p>Aby to zrobi\u0107, dodaj na pocz\u0105tku naszego <code>\/webpack.config.js<\/code>pliku:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Nast\u0119pnie dodaj na dole pliku:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Je\u015bli <code>npm start<\/code>polecenie zostanie uruchomione, a \u015brodowisko w\u0119z\u0142a nie jest ustawione na produkcyjne, <code>.map<\/code>pliki nie zostan\u0105 utworzone.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dzi\u0119ki oficjalnemu wsparciu zespo\u0142u edytora WordPress (Gutenberg) mo\u017cesz teraz szybko rozpocz\u0105\u0107 prac\u0119 z wtyczk\u0105 blokow\u0105 za pomoc\u0105 skryptu 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":[721,919,897,845,866],"tags":[1169],"class_list":["post-228183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-kod","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228183"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}