Home > Software engineering >  Why "npm run build" does not generate *.asset.php when working with @wordpress/scripts?
Why "npm run build" does not generate *.asset.php when working with @wordpress/scripts?

Time:09-26

I am building custom gutenberg blocks using npm, webpack and @wordpress/scripts. Everything was fine until I tried to use block.json file. To use block.json file I need block.asset.php file in the build directory because that's the way WordPress core is coded... (https://github.com/WordPress/gutenberg/issues/40447)

And now my problem is that running npm run build does not generate .asset.php file and I do not know why. When I register blocks using wp_enqueue_script or when I manually create an empty .asset.php it works fine.

My webpack.config.js now looks like this:

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

module.exports = {
    ...defaultConfig,
    entry: {
        'cgbms-section-block': './src/section-block.js',
        'cgbms-article-block': './src/article-block.js',
        'cgbms-article-header-block': './src/article-header-block.js',
        'cgbms-category-block': './src/category-block.js',
        'cgbms-category-block-edit': './src/category-block-edit.js',
        'cgbms-card-block': './src/card-block.js',
        'style-front': './src/css/style-front.scss',
        'style-editor': './src/css/style-editor.scss',
    },
    output: {
        path: path.join(__dirname, './build/'),
        filename: './blocks/[name].js'
    },
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/[name].css'
        })
    ],
    externals: { 
        '@wordpress/blocks': 'wp.blocks',
        '@wordpress/block-editor': 'wp.blockEditor' 
    },
}

CodePudding user response:

Okay so solution is actually really simple. I think I had to import default plugins config: ...defaultConfig.plugins

So my whole webpack.config.js is now:

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

module.exports = {
    ...defaultConfig,
    entry: {
        'cgbms-section-block': './src/section-block.js',
        'cgbms-article-block': './src/article-block.js',
        'cgbms-article-header-block': './src/article-header-block.js',
        'cgbms-category-block': './src/category-block.js',
        'cgbms-category-block-edit': './src/category-block-edit.js',
        'cgbms-card-block': './src/card-block.js',
        'style-front': './src/css/style-front.scss',
        'style-editor': './src/css/style-editor.scss',
    },
    output: {
        path: path.join(__dirname, './build/'),
        filename: './blocks/[name].js'
    },
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
        ]
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin({
            filename: './css/[name].css'
        })
    ]
}

as you can see I also removed externals block.

  • Related