使用@wordpress/scripts时，npm run build为何不生成*.asset.php文件？

核心原因 #

@wordpress/scripts默认靠DependencyExtractionWebpackPlugin生成.asset.php文件，但你的自定义webpack配置要么覆盖了默认插件，要么entry/output的设置不符合插件预期，导致文件生成失败。

具体修复步骤 #

1. 恢复默认的asset生成插件 #

你直接重写了plugins数组，把默认的DependencyExtractionWebpackPlugin给丢了。修改plugins配置，合并默认插件：

plugins: [
    ...defaultConfig.plugins, // 保留默认插件，包括生成asset.php的核心插件
    new MiniCssExtractPlugin({
        filename: './css/[name].css'
    })
],

2. 调整entry结构，不要单独把样式作为entry #

@wordpress/scripts默认会通过区块JS文件导入样式来处理样式提取，没必要把style-front和style-editor单独作为entry。把样式导入到对应的区块JS里，比如在section-block.js里加：

import './css/style-editor.scss';
import './css/style-front.scss';

然后删掉entry里的style-front和style-editor项。

3. 修正output配置，保留默认参数 #

你的output直接覆盖了所有默认配置，可能导致插件找不到文件位置。改成只修改需要的部分：

output: {
    ...defaultConfig.output,
    path: path.join(__dirname, './build/'),
    filename: './blocks/[name].js'
},

4. 对齐block.json的script字段 #

每个区块的block.json里的script字段要和entry文件名对应，比如cgbms-section-block对应的block.json要写：

{
    "script": "file:./blocks/cgbms-section-block.js"
}

5. 移除自定义externals #

@wordpress/scripts已经默认处理了WordPress依赖的externals，手动添加反而可能冲突。删掉这段：

// externals: { 
//     '@wordpress/blocks': 'wp.blocks',
//     '@wordpress/block-editor': 'wp.blockEditor' 
// },

测试 #

改完配置后跑npm run build，去build/blocks目录下看有没有生成对应的*.asset.php文件。要是还不行，删掉node_modules和package-lock.json，重新装依赖再构建。

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