Estensione del webpack Crea script di blocco di WordPress Config

Con il supporto ufficiale del team di WordPress Editor (Gutenberg), ora puoi iniziare rapidamente a utilizzare un plug-in di blocco utilizzando WordPress Create Block Script (@wordpress/create-blockpacchetto npm).

Questo articolo è per una versione precedente di Crea script di blocco

Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere più compatibili con l’ultimo script create block. È possibile visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui.

Abbiamo anche una guida aggiornata sull’aggiunta di punti di ingresso aggiuntivi al webpack.

In questo articolo esploriamo come aggiungere una personalizzazione webpack.configper espandere la wp-scriptsfunzionalità di compilazione del blocco generato dal blocco.

Con questo possiamo espandere npm startil comando per eseguire attività aggiuntive. In questo caso configureremo il plugin per compilare Sass( sass, scss) in css.

Compileremo il Sass dalla /srccartella nei file style.csse editor.cssnella radice del plugin.

Crea i nostri file Sass

La prima cosa che faremo è creare una nuova cartella in /src/scss. Qui aggiungeremo due file:

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

Copieremo i file cssda /editor.csse /style.cssnei file appena creati.

Quindi elimineremo i file /editor.csse /style.css.

File SCSS e la nuova struttura delle cartelle.

Importa il Sass in/src/index.js

Nella parte superiore del tuo /src/index.jsaggiungi le seguenti affermazioni:

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

Ciò consentirà al webpack di prelevare i .scssfile in modo che possano essere elaborati.

Importando in questo modo il Sass nella parte superiore del nostro file, ci consentirà di compilare il Sass per più blocchi all’interno dello stesso plugin in un unico file. In questo caso compilerà il Sass in singoli /editor.csse /style.cssfile per l’intero plugin.

Imposta ilwebpack.config

Crea un nuovo file nella radice del plugin chiamato /webpack.config.js. Copia il seguente codice in quel file:

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

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

Ora nel tuo terminale inserisci il seguente comando cd‘ed nella radice del plugin:

Il plugin dovrebbe compilare il JavaScript nella cartella build normalmente.

Installazione di un pacchetto per compilare Sass

Utilizzeremo il mini-css-extract-pluginpacchetto npm per creare .cssfile dal nostro Sass, per fare ciò abbiamo anche bisogno di un paio di pacchetti aggiuntivi per elaborare .scssprima i file in CSS.

Installeremo il scss-loaderpacchetto npm, per permetterci di compilare CSS in Sass. questo ha una dipendenza di node-scss.

Installeremo anche il css-loaderpacchetto npm per permetterci di gestire @importle istruzioni nel CSS.

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

Ora estendi il /webpack.config.jsfile in modo che appaia come segue:

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',
        } ),
    ],
};

Sulla riga 2 abbiamo importato il mini-css-extract-plugin, sulla riga 20 l’abbiamo dichiarato come plugin e passato ../[name].csscome filename. Ciò significa che il file compilato verrà aggiunto alla radice del plugin.

Alla riga 10 abbiamo passato un oggetto che ha un testparametro, che usa una regex per indicare il tipo di file che stiamo controllando e un useparametro.

Il useparametro contiene un array di tutti i plugin che applicheremo per quel test. Esegue i plugin dalla parte inferiore dell’elenco, terminando in alto.

Ora, se lo eseguiamo npm start, produrrà un .cssfile nella radice del plugin.

Generazione di un file CSS.

Osservando la struttura dei file abbiamo due file aggiuntivi:

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

(Riceviamo anche un paio di file JavaScript nella /buildcartella, ma spiegherò come gestirli in seguito).

Il .mapfile è un puntatore che indica alla tua console JavaScript in quale file alcuni CSS o Sass sono stati originariamente definiti e aiuta con il debug.

Esaminando il /index.cssfile, contiene il codice di entrambi i file /src/scss/editor.scsse /src/scss/style.scss.

Questo non è ciò che vogliamo, poiché i file di stile ed editor sono accodati separatamente nel nostro file php dei plugin.

Dividere il file CSS

Per dividere questo /index.cssfile dobbiamo sfruttare l’ optimization.splitChunksoggetto del webpack 4. Per ulteriori informazioni sulla sua configurazione, leggere la pagina della documentazione di splitChunks.

Aggiungi quanto segue al tuo /webpack.config.jsfile:

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',
        } ),
    ],
};

Elimina i file generati in precedenza e la cartella build ed esegui npm start.

Ora otteniamo i seguenti file:

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

Guardando /editor.csse /style.cssquesti sono stati generati correttamente e contengono il codice che vogliamo!

Generazione dell’editor e dei file CSS di stile.

I file nella /buildcartella non sono necessari per la nostra configurazione, esplorerò come rimuoverli in seguito.

Rimozione di file indesiderati

Per rimuovere i file indesiderati utilizzeremo il ignore-emit-webpack-pluginpacchetto npm.

Questo plugin impedisce al webpack di produrre (o "emettere" determinati file).

Installa il pacchetto npm con il comando da terminale:

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

Modifica il tuo /webpack.config.jsfile per includere la configurazione per il plug-in Ignore Emit webpack.

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',
        } ),
    ],
};

Nota i nuovi riferimenti alla riga 2, che include il plug-in Ignore Emit, e alla riga 41 che indica al plug-in quali file non emettere.

Ora quando eseguiamo npm start(dopo aver eliminato la /buildcartella) i file /build/editor.js, /build/editor.js.map, /build/style.jse /build/style.js.mapnon vengono più creati.

Uscita di sola produzione

Se vogliamo avere solo l’output del prodotto ed escludere i .mapfile, possiamo semplicemente passare devtool: falsecome parametro nel nostro module.exportsoggetto e questo impedirà la .mapgenerazione dei file.

Poiché desideriamo che questi file vengano esclusi solo su un server di produzione, possiamo controllare l’ process.env.NODE_ENVimpostazione per vedere su cosa è impostato il nostro ambiente corrente e passare devtool: falsese l’ambiente è impostato su produzione.

Per fare ciò, aggiungi quanto segue all’inizio del nostro /webpack.config.jsfile:

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

Quindi aggiungi quanto segue in fondo al file:

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

Se il npm startcomando viene eseguito e l’ambiente del nodo non è impostato su produzione, i .mapfile non verranno creati.