升级Webpack5后postcss-assets-webpack-plugin报match非函数错误及执行顺序问题求助

问题原因 #

Webpack V5重构了插件执行生命周期，CopyWebpackPlugin的执行时机不再像V4那样晚于构建流程内的资源处理插件，导致postcss-assets-webpack-plugin在扫描资源时，会把CopyWebpackPlugin正在复制的静态CSS文件也纳入处理列表。

解决方案 #

1. 给postcss-assets-webpack-plugin添加过滤规则

修改插件配置，明确指定只处理Webpack依赖树内的CSS文件，排除CopyWebpackPlugin复制的目录：

new PostcssAssetsPlugin({
  // 保留原有配置...
  include: ['src/**/*.css'], // 仅包含源码目录下的CSS文件
  exclude: ['dist/static/**/*.css'] // 排除复制目标目录的文件
})

2. 调整CopyWebpackPlugin的执行时机

通过Webpack的钩子，让CopyWebpackPlugin在postcss-assets-webpack-plugin完成资源扫描后再执行。可以替换原有的CopyWebpackPlugin配置，改用手动挂载afterEmit钩子：

// 移除原有的CopyWebpackPlugin实例，添加以下代码
compiler.hooks.afterEmit.tap('CustomCopyPlugin', () => {
  const copyPlugin = new CopyWebpackPlugin({
    patterns: [
      // 你的复制规则
      { from: 'static/css', to: 'static/css' }
    ]
  });
  copyPlugin.apply(compiler);
});

afterEmit钩子会在Webpack完成所有资源构建和处理后触发，此时postcss-assets-webpack-plugin已经完成资源列表收集，不会再捕获到复制的文件。

3. 升级插件到适配V5的版本

检查postcss-assets-webpack-plugin版本，确保使用的是适配Webpack V5的最新版本，部分旧版本插件未针对V5生命周期变化做适配，升级后可能直接解决问题。

内容的提问来源于stack exchange，提问作者murtuza.syed