Webpack 5结合@WordPress/Scripts构建时webpack-remove-empty-scripts插件误删asset.php文件的解决求助

我之前在基于@wordpress/scripts的项目里也遇到过完全相同的问题！罪魁祸首是webpack-remove-empty-scripts的默认执行时机和匹配逻辑——它会在DependencyExtractionWebpackPlugin生成asset.php之前就运行，而且会把和CSS入口关联的所有产物（包括自动生成的asset.php）都判定为空脚本的附属文件一起删掉，单纯用ignore匹配文件名根本拦不住。

这里有两个经过验证的解决方案，你可以按顺序尝试：

方案1：调整插件执行阶段+精准匹配文件类型 #

这是最推荐的方法，通过修改插件的运行时机，让它在asset.php生成完成后再处理空JS文件，同时精准限定只检查JS文件：

const otherStyleConfig = {
  ...defaultConfig,
  entry: {
    'blog': path.resolve( './src/sass', 'blog.scss' ),
    'editor': path.resolve( './src/sass', 'editor.scss' ),
    'header-footer': path.resolve( './src/sass', 'header-footer.scss' ),
    'partners': path.resolve( './src/sass', 'partners.scss' ),
    'posts-and-pages': path.resolve( './src/sass', 'posts-and-pages.scss' ),
    'resource-center': path.resolve( './src/sass', 'resource-center.scss' ),
    'resource-single': path.resolve( './src/sass', 'resource-single.scss' ),
    'support-center': path.resolve( './src/sass', 'support-center.scss' ),
    'table-of-contents': path.resolve( './src/sass', 'table-of-contents.scss' ),
    'widgets': path.resolve( './src/sass', 'widgets.scss' ),
  },
  module: {
    // 你的module配置不变
    rules: [/* ... */],
  },
  output: {
    path: path.resolve(__dirname, 'build/css'),
  },
  devtool: 'source-map',
  plugins: [
    new MiniCssExtractPlugin(),
    new DependencyExtractionWebpackPlugin(),
    new RemoveEmptyScriptsPlugin({
      verbose: true,
      // 关键：让插件在所有产物处理插件之后再运行
      stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
      // 仅匹配JS文件，避免触碰PHP产物
      test: /\.js$/,
      // 双重保险：明确忽略asset.php文件
      ignore: [/.*asset.php$/],
    }),
  ]
}

关键配置解释： #

• stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS：这个选项会延迟插件的执行时机，确保DependencyExtractionWebpackPlugin已经生成了asset.php，此时插件不会把PHP文件和空JS关联起来删除。
• test: /\.js$/：精准限定插件只处理JS文件，从根源避免它去检查PHP产物。
• ignore: [/.*asset.php$/]：作为额外的安全层，确保即使有意外情况，asset.php也不会被删除。

方案2：用自定义逻辑判断是否删除文件 #

如果方案1还是没解决问题，可以试试用enabled选项结合函数来手动控制哪些文件需要删除：

new RemoveEmptyScriptsPlugin({
  verbose: true,
  enabled: (filename) => {
    // 只删除后缀为.js的空文件，同时排除任何和asset.php相关的文件
    return filename.endsWith('.js') && !filename.includes('asset.php');
  }
})

这个方法更灵活，直接通过函数判断每个文件是否需要被删除，完全避免误删PHP产物的可能。

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