扩展WordPress create-block交互式模板Webpack配置失败求助

问题描述 #

使用@wordpress/create-block-interactive-template创建WordPress插件，需自定义Gutenberg区块及配套管理页面并使用WordPress组件，但无法将src/admin.js纳入build目录。修改Webpack配置后执行npm run build报错，提示配置对象存在未知属性'1'，不符合Webpack API schema。

报错信息 #

webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property '1'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, extends?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           1: …
         }
       })
     ]

解决方案 #

1. 修复Webpack配置错误 #

问题根源是getWebpackEntryPoints()在部分@wordpress/scripts版本中返回数组类型的入口配置，将其展开到对象中会生成以数组索引为键的非法属性（如'1'）。以下提供两种修正方式：

方式一：兼容数组/对象形式的原入口

// Import the original config from the @wordpress/scripts package.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Import the helper to find and generate the entry points in the src directory
const { getWebpackEntryPoints } = require( '@wordpress/scripts/utils/config' );

// 定义自定义入口
const customEntries = {
    admin: './src/admin.js'
};

// 合并原有入口与自定义入口
let entry;
const originalEntries = getWebpackEntryPoints();
if ( Array.isArray( originalEntries ) ) {
    // 数组转对象后合并
    entry = {
        ...originalEntries.reduce( (acc, path, index) => {
            acc[`entry-${index}`] = path;
            return acc;
        }, {} ),
        ...customEntries
    };
} else {
    // 对象直接合并
    entry = {
        ...originalEntries,
        ...customEntries
    };
}

module.exports = {
    ...defaultConfig,
    entry
};

方式二：手动指定所有入口（更简洁）

// Import the original config from the @wordpress/scripts package.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// 直接定义所有入口，包含区块主入口和自定义管理页面入口
module.exports = {
    ...defaultConfig,
    entry: {
        index: './src/index.js',
        admin: './src/admin.js'
    },
};

2. 修正PHP中的资源加载逻辑 #

admin.js打包后会生成独立的admin.asset.php文件，需加载该文件获取正确的依赖和版本信息，替换原代码中错误的index.asset.php引用：

/**
 * Load the admin script.
 *
 * @param string $hook The hook name of the page.
 */
function load_custom_wp_admin_scripts( $hook ) {
    // Load only on ?page=my-custom-gutenberg-app.
    if ( 'toplevel_page_my-custom-gutenberg-app' !== $hook ) {
        return;
    }
    // 加载admin.js对应的asset文件
    $admin_asset_file = include plugin_dir_path( __FILE__ ) . '/build/admin.asset.php';

    foreach ( $admin_asset_file['dependencies'] as $style ) {
        wp_enqueue_style( $style );
    }

    wp_register_script(
        'my-custom-gutenberg-app',
        plugins_url( 'build/admin.js', __FILE__ ),
        $admin_asset_file['dependencies'],
        $admin_asset_file['version'],
        true
    );
    wp_enqueue_script( 'my-custom-gutenberg-app' );
}

3. 重新执行构建 #

npm run build

执行后，src/admin.js会被正确打包到build目录，Webpack配置报错也会消失。

内容的提问来源于stack exchange，提问作者Alexander A