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

admin管理员组

文章数量:1304911

Need help understanding "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?

Need help understanding "Provide your own webpack config" https://developer.wordpress/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?

• block-editor
• scripts
• configuration

Share Improve this question edited Jan 28, 2021 at 11:03 kero 6,32011 gold badge2525 silver badges3434 bronze badges asked Jan 28, 2021 at 10:56 GSAGSA 4144 bronze badges 7

• If you remove the slider: ... part, does it work? Does the full log (from the file) have more details on what is actually going wrong? – kero Commented Jan 28, 2021 at 11:05
• Yes it is working – GSA Commented Jan 28, 2021 at 11:06
• Ok, I haven't worked with Webpack in some time, but do you even need a new entry? And are you sure ./src/slider.js exists and has code in it that doesn't produce errors? – kero Commented Jan 28, 2021 at 11:09
• No I dont think I have an error in the src/slider.js: console.log('im here too') import $ from jquery window.jQuery = window.$ = $; jQuery(document).ready(function( $ ) { $('.carousel').slick({ rtl: true }); }); ... npm 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: – GSA Commented Jan 28, 2021 at 11:16
• Are you trying to have multiple scripts that each get transpiled to their own bundle, with their own map, and their own asset PHP file? AKA having 2 projects but using a single command and webpack not 2? – Tom J Nowell ♦ Commented Jan 28, 2021 at 11:16

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

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

I found my problem:

https://webpack.js/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 webpackconfig