{"id":228124,"date":"2022-10-15T18:14:00","date_gmt":"2022-10-15T15:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228124"},"modified":"2022-11-09T00:50:32","modified_gmt":"2022-11-08T21:50:32","slug":"utoeka-wordpress-create-block-script-webbpaket-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/utoeka-wordpress-create-block-script-webbpaket-config\/","title":{"rendered":"Ut\u00f6ka WordPress Create Block Script webbpaket Config"},"content":{"rendered":"\n<p>Med officiellt st\u00f6d fr\u00e5n WordPress Editor (Gutenberg)-teamet kan du nu snabbt komma ig\u00e5ng med ett blockplugin med <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Create Block Script<\/a> (<code>@wordpress\/create-block<\/code>npm-paketet).<\/p>\n<p><strong>Den h\u00e4r artikeln \u00e4r f\u00f6r en \u00e4ldre version av Create Block Script<\/strong><\/p>\n<p>\u00c4ven om teorin fortfarande kan till\u00e4mpas, kanske en del av informationen i den h\u00e4r artikeln inte l\u00e4ngre \u00e4r kompatibel med det senaste skapa blockskriptet. Du kan <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se v\u00e5r uppdaterade Skapa Block-skriptguide h\u00e4r<\/a>.<\/p>\n<p>Vi har ocks\u00e5 en uppdaterad guide om <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att l\u00e4gga till ytterligare ing\u00e5ngspunkter till webpack<\/a>.<\/p>\n<p>I den h\u00e4r artikeln utforskar vi hur du kan l\u00e4gga till en anpassad <code>webpack.config<\/code>f\u00f6r att ut\u00f6ka <code>wp-scripts<\/code>kompileringsfunktionen f\u00f6r blocket som genereras av blocket.<\/p>\n<p>Med detta kan vi ut\u00f6ka <code>npm start<\/code>kommandot f\u00f6r att k\u00f6ra ytterligare uppgifter. I det h\u00e4r fallet kommer vi att konfigurera insticksprogrammet f\u00f6r att kompilera Sass (<code>sass<\/code>, <code>scss<\/code>) till <code>css<\/code>.<\/p>\n<p>Vi kommer att kompilera Sass fr\u00e5n <code>\/src<\/code>mappen till <code>style.css<\/code>och <code>editor.css<\/code>filerna i roten av plugin-programmet.<\/p>\n<h2>Skapa v\u00e5ra Sass-filer<\/h2>\n<p>Det f\u00f6rsta vi ska g\u00f6ra \u00e4r att skapa en ny mapp p\u00e5 <code>\/src\/scss<\/code>. H\u00e4r l\u00e4gger vi till tv\u00e5 filer:<\/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>Vi kommer att kopiera <code>css<\/code>fr\u00e5n <code>\/editor.css<\/code>och <code>\/style.css<\/code>-filerna till de nyskapade filerna.<\/p>\n<p>Sedan tar vi bort <code>\/editor.css<\/code>och <code>\/style.css<\/code>-filerna.<\/p>\n<p>SCSS-filer och den nya mappstrukturen.<\/p>\n<h3>Importera Sass till<code>\/src\/index.js<\/code><\/h3>\n<p><code>\/src\/index.js<\/code>L\u00e4gg till f\u00f6ljande p\u00e5st\u00e5enden h\u00f6gst upp:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Detta g\u00f6r det m\u00f6jligt f\u00f6r webpack att h\u00e4mta <code>.scss<\/code>filerna s\u00e5 att de kan bearbetas.<\/p>\n<p>Genom att importera Sass \u00f6verst i v\u00e5r fil p\u00e5 detta s\u00e4tt kommer det att g\u00f6ra det m\u00f6jligt f\u00f6r oss att <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kompilera Sass f\u00f6r flera block inom samma plugin till en enda fil<\/a>. I det h\u00e4r fallet kommer den att kompilera Sass till singel <code>\/editor.css<\/code>och <code>\/style.css<\/code>filer f\u00f6r hela plugin-programmet.<\/p>\n<h2>St\u00e4ll in<code>webpack.config<\/code><\/h2>\n<p>Skapa en ny fil i roten av pluginet som heter <code>\/webpack.config.js<\/code>. Kopiera f\u00f6ljande kod till den filen:<\/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>Skriv nu f\u00f6ljande kommando &#8217;ed i din terminal <code>cd<\/code>i roten av plugin:<\/p>\n<p>Plugin-programmet b\u00f6r kompilera JavaScript i build-mappen som vanligt.<\/p>\n<h3>Installera ett paket f\u00f6r att kompilera Sass<\/h3>\n<p>Vi kommer att anv\u00e4nda <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>npm-paketet<\/a> f\u00f6r att skapa <code>.css<\/code>filer fr\u00e5n v\u00e5r Sass, f\u00f6r att g\u00f6ra detta beh\u00f6ver vi ocks\u00e5 ett par extra paket f\u00f6r att bearbeta <code>.scss<\/code>filerna till CSS f\u00f6rst.<\/p>\n<p>Vi kommer att installera <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>paketet npm<\/a>, s\u00e5 att vi kan kompilera CSS till Sass. detta har ett beroende av <code>node-scss<\/code>.<\/p>\n<p>Vi kommer ocks\u00e5 att installera <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>npm-paketet s\u00e5<\/a> att vi kan hantera <code>@import<\/code>uttalanden i CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>F\u00f6rl\u00e4ng nu <code>\/webpack.config.js<\/code>filen s\u00e5 att den ser ut s\u00e5 h\u00e4r:<\/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>P\u00e5 rad 2 har vi importerat <code>mini-css-extract-plugin<\/code>, p\u00e5 rad 20 har vi deklarerat det som ett plugin och skickat in <code>..\/[name].css<\/code>som <code>filename<\/code>. Detta inneb\u00e4r att den kompilerade filen kommer att l\u00e4ggas till roten av plugin-programmet.<\/p>\n<p>P\u00e5 rad 10 har vi skickat in ett objekt som har en <code>test<\/code>parameter, som anv\u00e4nder ett regex f\u00f6r att indikera vilken typ av fil vi s\u00f6ker efter och en <code>use<\/code>parameter.<\/p>\n<p>Parametern <code>use<\/code>inneh\u00e5ller en upps\u00e4ttning av alla plugins som vi kommer att anv\u00e4nda f\u00f6r det testet. Den k\u00f6r plugins fr\u00e5n botten av listan och slutar \u00f6verst.<\/p>\n<p>Om vi \u200b\u200bnu k\u00f6r <code>npm start<\/code>kommer det att producera en <code>.css<\/code>fil i roten av plugin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Ut\u00f6ka WordPress Create Block Script webbpaket Config\" \/>Skapa en CSS-fil.<\/p>\n<p>Om vi \u200b\u200btittar p\u00e5 filstrukturen har vi ytterligare tv\u00e5 filer:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Vi f\u00e5r \u00e4ven ett par JavaScript-filer i <code>\/build<\/code>mappen, men jag ska f\u00f6rklara hur man hanterar dessa senare).<\/p>\n<p>Filen <code>.map<\/code>\u00e4r en pekare som indikerar f\u00f6r din JavaScript-konsol vilken fil n\u00e5gon CSS eller Sass ursprungligen definierades i, och hj\u00e4lper till med fels\u00f6kning.<\/p>\n<p>N\u00e4r du unders\u00f6ker <code>\/index.css<\/code>filen inneh\u00e5ller den koden fr\u00e5n b\u00e5de filen <code>\/src\/scss\/editor.scss<\/code>och <code>\/src\/scss\/style.scss<\/code>filerna.<\/p>\n<p>Det h\u00e4r \u00e4r inte vad vi vill ha, eftersom stil- och editorfilerna st\u00e4lls i k\u00f6 separat i v\u00e5r plugins php-fil.<\/p>\n<h3>Dela upp CSS-filen<\/h3>\n<p>F\u00f6r att dela upp den h\u00e4r <code>\/index.css<\/code>filen m\u00e5ste vi dra nytta av webpack 4:s <code>optimization.splitChunks<\/code>objekt. F\u00f6r mer information om dess konfiguration l\u00e4s <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">splitChunks dokumentationssida<\/a>.<\/p>\n<p>L\u00e4gg till f\u00f6ljande i din <code>\/webpack.config.js<\/code>fil:<\/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>Ta bort de tidigare genererade filerna och build-mappen och k\u00f6r <code>npm start<\/code>.<\/p>\n<p>Vi f\u00e5r nu f\u00f6ljande filer:<\/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>Tittar p\u00e5 <code>\/editor.css<\/code>och <code>\/style.css<\/code>dessa har genererats korrekt, och inneh\u00e5ller koden som vi vill ha!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Ut\u00f6ka WordPress Create Block Script webbpaket Config\" \/>Generera editorn och stil CSS-filer.<\/p>\n<p>Filerna i <code>\/build<\/code>mappen beh\u00f6vs inte f\u00f6r v\u00e5r installation, jag ska utforska hur vi kan ta bort dessa h\u00e4rn\u00e4st.<\/p>\n<h3>Ta bort o\u00f6nskade filer<\/h3>\n<p>F\u00f6r att ta bort o\u00f6nskade filer kommer vi att anv\u00e4nda <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>paketet npm<\/a>.<\/p>\n<p>Denna plugin f\u00f6rhindrar webbpack fr\u00e5n att mata ut (eller &quot;s\u00e4nda ut&quot; vissa filer).<\/p>\n<p>Installera npm-paketet med terminalkommandot:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>\u00c4ndra din <code>\/webpack.config.js<\/code>fil s\u00e5 att den inkluderar konfigurationen f\u00f6r 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>Notera de nya referenserna p\u00e5 rad 2, som inkluderar plugin-programmet Ignore Emit, och p\u00e5 rad 41 som talar om f\u00f6r plugin-programmet vilka filer som inte ska s\u00e4ndas ut.<\/p>\n<p>Nu n\u00e4r vi k\u00f6r <code>npm start<\/code>(efter att ha tagit bort <code>\/build<\/code>mappen) skapas inte l\u00e4ngre <code>\/build\/editor.js<\/code>, <code>\/build\/editor.js.map<\/code>, <code>\/build\/style.js<\/code>och .<code>\/build\/style.js.map<\/code><\/p>\n<h3>Endast produktion<\/h3>\n<p>Om vi \u200b\u200bvill ha endast produktutdata och exkludera <code>.map<\/code>filerna kan vi helt enkelt skicka <code>devtool: false<\/code>in som en parameter till v\u00e5rt <code>module.exports<\/code>objekt, och detta kommer att f\u00f6rhindra att <code>.map<\/code>filerna genereras.<\/p>\n<p>Eftersom vi bara vill att dessa filer ska uteslutas p\u00e5 en produktionsserver kan vi kontrollera <code>process.env.NODE_ENV<\/code>inst\u00e4llningen f\u00f6r att se vad v\u00e5r nuvarande milj\u00f6 \u00e4r inst\u00e4lld p\u00e5, och skicka in <code>devtool: false<\/code>om milj\u00f6n \u00e4r inst\u00e4lld p\u00e5 produktion.<\/p>\n<p>F\u00f6r att g\u00f6ra detta, l\u00e4gg till f\u00f6ljande \u00f6verst i v\u00e5r <code>\/webpack.config.js<\/code>fil:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>L\u00e4gg sedan till f\u00f6ljande l\u00e4ngst ner i filen:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Om <code>npm start<\/code>kommandot k\u00f6rs och nodmilj\u00f6n inte \u00e4r inst\u00e4lld p\u00e5 produktion kommer <code>.map<\/code>filerna inte att skapas.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Med officiellt st\u00f6d fr\u00e5n WordPress Editor (Gutenberg)-teamet kan du nu snabbt komma ig\u00e5ng med ett blockplugin med hj\u00e4lp av 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":[848,901,922,724,868],"tags":[1173],"class_list":["post-228124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228124"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}