Gutenberg Block Development: Trying to add custom js script to npm start command by modifying webpack.config

Question

Gutenberg Block Development: Trying to add custom js script to npm start command by modifying webpack.config

Grégoire Sailland

2021年1月28日 11:58

Need help understanding Provide your own webpack config https://developer.wordpress.org/block-editor/packages/packages-scripts/#provide-your-own-webpack-config

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

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        //index: path.resolve( process.cwd(), 'src', 'index.js' ),
        slider: path.resolve( process.cwd(), 'src', 'slider.js' ),

    },
};

I am trying here to add a new scipt to the buid folder from src folder while developing a gutenberg block I get error:

ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `wp-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Same for Adding other distinct css file how can I do it?

Topic block-editor scripts configuration Wordpress

Category Web

Grégoire Sailland · Accepted Answer · 2021年1月28日 11:58

Thank you all for your help! I was on it since days!

I found my problem:

https://webpack.js.org/concepts/entry-points/ helped me to find the solution

Apparently path.resolve( process.cwd(), 'src', 'slider.js' ) was not working: replacing by simple string path fixed the problem:

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

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        slider: './src/slider.js',
    },
};

Gutenberg Block Development: Trying to add custom js script to npm start command by modifying webpack.config

About