Utöka WordPress Create Block Script webbpaket Config

Med officiellt stöd från WordPress Editor (Gutenberg)-teamet kan du nu snabbt komma igång med ett blockplugin med WordPress Create Block Script (@wordpress/create-blocknpm-paketet).

Den här artikeln är för en äldre version av Create Block Script

Även om teorin fortfarande kan tillämpas, kanske en del av informationen i den här artikeln inte längre är kompatibel med det senaste skapa blockskriptet. Du kan se vår uppdaterade Skapa Block-skriptguide här.

Vi har också en uppdaterad guide om att lägga till ytterligare ingångspunkter till webpack.

I den här artikeln utforskar vi hur du kan lägga till en anpassad webpack.configför att utöka wp-scriptskompileringsfunktionen för blocket som genereras av blocket.

Med detta kan vi utöka npm startkommandot för att köra ytterligare uppgifter. I det här fallet kommer vi att konfigurera insticksprogrammet för att kompilera Sass (sass, scss) till css.

Vi kommer att kompilera Sass från /srcmappen till style.cssoch editor.cssfilerna i roten av plugin-programmet.

Skapa våra Sass-filer

Det första vi ska göra är att skapa en ny mapp på /src/scss. Här lägger vi till två filer:

• /src/scss/editor.scss
• /src/scss/style.scss

Vi kommer att kopiera cssfrån /editor.cssoch /style.css-filerna till de nyskapade filerna.

Sedan tar vi bort /editor.cssoch /style.css-filerna.

SCSS-filer och den nya mappstrukturen.

Importera Sass till/src/index.js

/src/index.jsLägg till följande påståenden högst upp:

import './scss/editor.scss';
import './scss/style.scss';

Detta gör det möjligt för webpack att hämta .scssfilerna så att de kan bearbetas.

Genom att importera Sass överst i vår fil på detta sätt kommer det att göra det möjligt för oss att kompilera Sass för flera block inom samma plugin till en enda fil. I det här fallet kommer den att kompilera Sass till singel /editor.cssoch /style.cssfiler för hela plugin-programmet.

Ställ inwebpack.config

Skapa en ny fil i roten av pluginet som heter /webpack.config.js. Kopiera följande kod till den filen:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
        ]
    }
};

Skriv nu följande kommando ’ed i din terminal cdi roten av plugin:

Plugin-programmet bör kompilera JavaScript i build-mappen som vanligt.

Installera ett paket för att kompilera Sass

Vi kommer att använda mini-css-extract-pluginnpm-paketet för att skapa .cssfiler från vår Sass, för att göra detta behöver vi också ett par extra paket för att bearbeta .scssfilerna till CSS först.

Vi kommer att installera scss-loaderpaketet npm, så att vi kan kompilera CSS till Sass. detta har ett beroende av node-scss.

Vi kommer också att installera css-loadernpm-paketet så att vi kan hantera @importuttalanden i CSS.

npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev

Förläng nu /webpack.config.jsfilen så att den ser ut så här:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

På rad 2 har vi importerat mini-css-extract-plugin, på rad 20 har vi deklarerat det som ett plugin och skickat in ../[name].csssom filename. Detta innebär att den kompilerade filen kommer att läggas till roten av plugin-programmet.

På rad 10 har vi skickat in ett objekt som har en testparameter, som använder ett regex för att indikera vilken typ av fil vi söker efter och en useparameter.

Parametern useinnehåller en uppsättning av alla plugins som vi kommer att använda för det testet. Den kör plugins från botten av listan och slutar överst.

Om vi ​​nu kör npm startkommer det att producera en .cssfil i roten av plugin.

Skapa en CSS-fil.

Om vi ​​tittar på filstrukturen har vi ytterligare två filer:

• /index.css
• /index.css.map

(Vi får även ett par JavaScript-filer i /buildmappen, men jag ska förklara hur man hanterar dessa senare).

Filen .mapär en pekare som indikerar för din JavaScript-konsol vilken fil någon CSS eller Sass ursprungligen definierades i, och hjälper till med felsökning.

När du undersöker /index.cssfilen innehåller den koden från både filen /src/scss/editor.scssoch /src/scss/style.scssfilerna.

Det här är inte vad vi vill ha, eftersom stil- och editorfilerna ställs i kö separat i vår plugins php-fil.

Dela upp CSS-filen

För att dela upp den här /index.cssfilen måste vi dra nytta av webpack 4:s optimization.splitChunksobjekt. För mer information om dess konfiguration läs splitChunks dokumentationssida.

Lägg till följande i din /webpack.config.jsfil:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                  default: false,
                editor: {
                    chunks: 'all',
                      enforce: true,
                    name: 'editor',
                    test: /editor.s[ac]ss$/i,
                },
                style: {
                    chunks: 'all',
                      enforce: true,
                    name: 'style',
                    test: /style.s[ac]ss$/i,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

Ta bort de tidigare genererade filerna och build-mappen och kör npm start.

Vi får nu följande filer:

• /build/editor.js
• /build/editor.js.map
• /build/style.js
• /build/style.js.map
• /editor.css
• /editor.css.map
• /style.css
• /style.css.map

Tittar på /editor.cssoch /style.cssdessa har genererats korrekt, och innehåller koden som vi vill ha!

Generera editorn och stil CSS-filer.

Filerna i /buildmappen behövs inte för vår installation, jag ska utforska hur vi kan ta bort dessa härnäst.

Ta bort oönskade filer

För att ta bort oönskade filer kommer vi att använda ignore-emit-webpack-pluginpaketet npm.

Denna plugin förhindrar webbpack från att mata ut (eller "sända ut" vissa filer).

Installera npm-paketet med terminalkommandot:

npm install ignore-emit-webpack-plugin --save-dev

Ändra din /webpack.config.jsfil så att den inkluderar konfigurationen för Ignore Emit webpack-plugin.

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                  default: false,
                editor: {
                    chunks: 'all',
                      enforce: true,
                    name: 'editor',
                    test: /editor.s[ac]ss$/i,
                },
                style: {
                    chunks: 'all',
                      enforce: true,
                    name: 'style',
                    test: /style.s[ac]ss$/i,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

Notera de nya referenserna på rad 2, som inkluderar plugin-programmet Ignore Emit, och på rad 41 som talar om för plugin-programmet vilka filer som inte ska sändas ut.

Nu när vi kör npm start(efter att ha tagit bort /buildmappen) skapas inte längre /build/editor.js, /build/editor.js.map, /build/style.jsoch ./build/style.js.map

Endast produktion

Om vi ​​vill ha endast produktutdata och exkludera .mapfilerna kan vi helt enkelt skicka devtool: falsein som en parameter till vårt module.exportsobjekt, och detta kommer att förhindra att .mapfilerna genereras.

Eftersom vi bara vill att dessa filer ska uteslutas på en produktionsserver kan vi kontrollera process.env.NODE_ENVinställningen för att se vad vår nuvarande miljö är inställd på, och skicka in devtool: falseom miljön är inställd på produktion.

För att göra detta, lägg till följande överst i vår /webpack.config.jsfil:

const production = 'development' !== process.env.NODE_ENV;

Lägg sedan till följande längst ner i filen:

if (production) {
    module.exports.devtool = false;
}

Om npm startkommandot körs och nodmiljön inte är inställd på produktion kommer .mapfilerna inte att skapas.