How to build BOTH non-block components and blocks present in the /src directory using @wordpress/scripts

Question

I regularly use @wordpress/scripts for building both blocks and non-block components. Recently, I started working in a new plugin that registers both some blocks and non-block components that add additional panels using the registerPlugin() function. This is the structure of my /src directory:

/src
    /blocks
        /my-first-block
            block.json
            ...
        /my-second-block
            block.json
            ...
        /my-third-block 
            block.json
            ...
    /components
        /my-first-panel
            index.js
        /my-second-panel
            index.js
    index.js
    style.css

This is the content of the root index.js file:

import { registerPlugin } from '@wordpress/plugins';

import FirstPanelOptionsPanelComponent from './components/my-first-panel';
import SecondPanelOptionsPanelComponent from './components/my-second-panel';
import './style.scss';

registerPlugin('first-panel-options-panel', {
    render: FirstPanelOptionsPanelComponent,
});

registerPlugin('second-panel-options-panel', {
    render: SecondPanelOptionsPanelComponent,
});

When you run the wp-scripts build script from the @wordpress/scripts package, it only builds the blocks located in the /src directory. However, if you specifically run wp-scripts build src/index.js, it builds the components but exclude the blocks.

Is there a way to build BOTH the blocks and the non-block components at once?

Answer 1

I'm pasting the answer I got from a developer in the Gutenberg repository.

Just add a webpack.config.js file at the root of your project with the following contents:

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

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry(),
        index: './src/index.js',
    },
};

This will build all the blocks in /src/blocks/ folder and also compile the /src/index.js file.